全选复选框时为对应label添加.active类及change事件触发问题

为什么.prop("checked", true)不触发change事件？ #

这是jQuery里一个很容易踩的小坑：用.prop()直接修改DOM元素的属性值时，并不会自动触发对应的事件。只有当用户通过真实交互（比如手动点击复选框）改变控件状态时，浏览器才会自动触发change事件。你用代码直接修改checked属性属于“静默修改”，事件系统根本感知不到这个变化，所以绑定在input[name="check"]上的change函数自然不会执行。

如何解决这个问题？ #

我们有两种思路来修复这个问题，同时还能让你的全选/取消全选逻辑更健壮：

方案1：手动触发change事件

在通过.prop()设置复选框状态后，直接调用.change()方法手动触发事件，这样就能让你的事件处理函数执行，给对应的label添加/移除active类。

修改后的JS代码：

$(document).ready(function() {
  // 全选/取消全选逻辑
  $(".select-all").on("click", function() {
    const isChecked = $(this).is(":checked");
    // 设置状态后手动触发change事件，让label类同步更新
    $(".select-input").prop("checked", isChecked).change();
  });

  // 单个复选框的change事件处理
  $('input[name="check"]:checkbox').change(function() {
    const $label = $(this).parent("label");
    $(this).is(":checked") ? $label.addClass("active") : $label.removeClass("active");

    // 额外补充：当任意一个复选框取消时，同步取消全选按钮的选中状态
    const allChecked = $('input[name="check"]:checkbox').length === $('input[name="check"]:checkbox:checked').length;
    $(".select-all").prop("checked", allChecked);
  });
});

方案2：抽离公共逻辑（更推荐）

把处理label类的逻辑抽成一个独立函数，不管是全选还是单个复选框变化，都直接调用这个函数。这样代码更清晰，也避免了重复逻辑：

$(document).ready(function() {
  // 公共函数：更新单个复选框对应的label状态
  function updateLabelState($checkbox) {
    const $label = $checkbox.parent("label");
    $checkbox.is(":checked") ? $label.addClass("active") : $label.removeClass("active");
  }

  // 全选/取消全选逻辑
  $(".select-all").on("click", function() {
    const isChecked = $(this).is(":checked");
    $(".select-input").each(function() {
      $(this).prop("checked", isChecked);
      updateLabelState($(this)); // 直接调用公共函数更新label
    });
  });

  // 单个复选框的change事件处理
  $('input[name="check"]:checkbox').change(function() {
    updateLabelState($(this));
    // 同步更新全选按钮状态
    const allChecked = $('input[name="check"]:checkbox').length === $('input[name="check"]:checkbox:checked').length;
    $(".select-all").prop("checked", allChecked);
  });
});

效果验证 #

不管用哪种方案，现在点击“Select All”按钮时，所有子复选框的label都会正确添加active类；取消全选或者单独取消某个复选框时，对应的label会移除active类，同时全选按钮也会同步更新状态，完全符合你的需求。

完整可运行代码示例 #

这里是整合后的完整代码，你可以直接复制测试：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.item {
  height: 50px;
  width: 50px;
  border: 3px solid;
  position: relative;
  margin: 10px 0;
}
.pick-select {
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transform: scale(1);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
.pick-select.active {
  transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transform: scale(0.8);
  border: 2px solid red;
}
</style>

<label for="selectall">
  <input type="checkbox" id="selectall" class="select-all"/>
  Select All
</label>
<div class="post-list">
  <div class="item">
    <div>
      <label class="pick-select" for="1"><input id="1" type="checkbox" class="select-input" name="check"></label>
      1
    </div>
  </div>
  <div class="item">
    <div>
      <label class="pick-select" for="2"><input id="2" type="checkbox" class="select-input" name="check"></label>
      2
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  $(".select-all").on("click", function() {
    const isChecked = $(this).is(":checked");
    $(".select-input").prop("checked", isChecked).change();
  });

  $('input[name="check"]:checkbox').change(function() {
    const $label = $(this).parent("label");
    $(this).is(":checked") ? $label.addClass("active") : $label.removeClass("active");

    const allChecked = $('input[name="check"]:checkbox').length === $('input[name="check"]:checkbox:checked').length;
    $(".select-all").prop("checked", allChecked);
  });
});
</script>

内容的提问来源于stack exchange，提问作者Kyle Underhill