jquery - 选中复选框时从复选框控制父级 5 级

Question

如您在 HTML 中所见，复选框隐藏在我想要影响的类中的 5 层。

$(".icheckbox").click(function() {
  if ($(this).is(":checked")) {
    $(this).closest(".gallery-item").addClass("active");
  } else {

  }
});

a.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="gallery-item" href="#">
  <div class="image">
    <ul class="gallery-item-controls">
      <li>
        <label class="check">
          <input type="checkbox" class="icheckbox">
        </label>
      </li>
    </ul>
  </div>
</a>

我想要的是在选中复选框时将 .active 类添加到 gallery-item 类，并在关闭(未选中)时将其删除。但是我找不到我使用 Jquery 的方法，更糟糕的是，我无法根据检查的 attr 来控制它，因为检查时不会添加检查的 attr。很奇怪。

这是一个CODEPEN .如果你做对了，灰色区域应该变成红色并与复选框关联

谢谢大家

Answer 1

你需要删除else上的类

$(document).ready(function(){
  $(".icheckbox").click(function() {
    if ($(this).is(":checked")) {
      $(this).closest(".gallery-item").addClass("active");
    } else {
      $(this).closest(".gallery-item").removeClass("active");
    }
  });
});

http://jsbin.com/zikomagike/edit?html,css,js,console,output

如果你想观察变化，使用.change()。即使某些其他函数更改了此类而不是输入，这也会被触发。

最好添加一个名称属性并在代码中使用它:$( "input[name='chkbox']")

HTML

<a class="gallery-item" href="#">
  <div class="image">
    <ul class="gallery-item-controls">
      <li>
        <label class="check">
          <input name="chkbox" type="checkbox" class="icheckbox">
        </label>
      </li>
    </ul>
  </div>
</a>

JS:

 $(document).ready(function(){
      $( "input[name='chkbox']" ).change(function() {
        if ($(this).is(":checked")) {
          $(this).closest(".gallery-item").addClass("active");
        } else {
          $(this).closest(".gallery-item").removeClass("active");
        }
      });
    });