选中不触发各自.change功能的所有复选框

要实现选中多个复选框但不触发各自的 .change 事件，可以使用以下方法：

基础概念

.change 事件是当输入框的值发生变化时触发的事件。对于复选框，通常在用户点击复选框时触发。

类型与应用场景

批量操作：如全选/全不选功能。
表单提交前验证：在提交表单前统一检查所有复选框的状态。

解决方法

可以通过临时禁用事件监听器来避免触发 .change 事件。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div>
  <input type="checkbox" class="checkItem"> Option 1<br>
  <input type="checkbox" class="checkItem"> Option 2<br>
  <input type="checkbox" class="checkItem"> Option 3<br>
</div>

<button id="selectAll">Select All</button>

<script>
$(document).ready(function() {
  // 初始化事件监听器
  $('.checkItem').change(function() {
    console.log('Checkbox changed:', this.checked);
  });

  // 全选功能
  $('#selectAll').click(function() {
    // 禁用事件监听器
    $('.checkItem').off('change');

    // 改变所有复选框的状态
    $('.checkItem').prop('checked', true);

    // 重新启用事件监听器
    $('.checkItem').on('change', function() {
      console.log('Checkbox changed:', this.checked);
    });
  });
});
</script>

</body>
</html>

解释

初始化事件监听器：为每个复选框添加 .change 事件处理函数。
全选功能：
- 使用 .off('change') 暂时移除所有复选框的 .change 事件监听器。
- 使用 .prop('checked', true) 将所有复选框设置为选中状态。
- 再次使用 .on('change', ...) 重新添加事件监听器。

通过这种方式，可以在批量操作时避免触发多次 .change 事件，从而提高性能和用户体验。