使用jQuery实现全选复选框勾选时将子复选框值赋值为对应类名

问题根因 #

通过jQuery的prop()方法动态修改复选框选中状态时，浏览器不会自动触发元素绑定的change事件，因此你写在子复选框change回调里的类名增减逻辑不会执行，这就是全选操作时功能失效的原因。

解决方案 #

只需要在全选逻辑中，修改完子复选框的选中状态后，手动触发change事件即可，修改后的全选代码如下：

$('.select-all').on('click', function() {
  let isSelected = $(this).is(':checked');
  $(this).parents('.checkbox-list').find('input[type="checkbox"]').not('.select-all').each(function() {
    // 修改选中状态后手动触发change事件
    $(this).prop('checked', isSelected).trigger('change');
  })
});

你原来的子复选框change事件绑定逻辑不需要做任何改动。

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