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

您需要删除其他类

$(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");
        }
      });
    });

选中复选框时，从复选框控制父级5级

1 个答案: