点击全选复选框时如何让selected_users列表为全选中值或空？

问题分析 #

原代码存在两个核心问题：

• 将全选框的change事件嵌套在全局复选框的click事件中，导致每次点击都会重复绑定事件，触发冗余逻辑
• 未针对全选框的状态做特殊处理，无法满足「全选时获取所有复选框值、取消全选时清空列表」的需求

修改后的代码 #

HTML（保持不变）

<div id="filter1">
    <input class="selectall" type="checkbox" value="all" checked="">
    <input type="checkbox" value="2" name="uid" checked="">
    <input type="checkbox" value="5" name="uid" checked="">
    <input type="checkbox" value="7" name="uid" checked="">
    <input type="checkbox" value="12" name="uid" checked="">
    <input type="checkbox" value="18" name="uid" checked="">
    <input type="checkbox" value="20" name="uid" checked="">
    <input type="checkbox" value="28" name="uid" checked="">
    <input type="checkbox" value="39" name="uid" checked="">
    <input type="checkbox" value="40" name="uid" checked="">
</div>

jQuery代码

var selected_users = [];

// 页面初始化时更新选中列表
$(function() {
  updateSelectedUsers();
});

// 全选框状态改变事件
$(document).on('change', '.selectall', function() {
  var isChecked = $(this).prop('checked');
  // 同步所有单个复选框的选中状态
  $('#filter1 input[name="uid"]').prop('checked', isChecked);
  // 更新选中用户列表
  updateSelectedUsers();
});

// 单个复选框点击事件
$(document).on('click', '#filter1 input[name="uid"]', function() {
  // 检查所有单个复选框是否全部选中
  var allChecked = $('#filter1 input[name="uid"]').length === $('#filter1 input[name="uid"]:checked').length;
  // 同步全选框的状态
  $('.selectall').prop('checked', allChecked);
  // 更新选中用户列表
  updateSelectedUsers();
});

// 统一更新选中用户列表的函数
function updateSelectedUsers() {
  var isSelectAllChecked = $('.selectall').prop('checked');
  if (isSelectAllChecked) {
    // 全选状态：获取所有单个复选框的值
    selected_users = $('#filter1 input[name="uid"]').map(function() {
      return $(this).val();
    }).get();
  } else {
    // 非全选状态：获取当前选中的单个复选框的值（取消全选时所有单个复选框未选中，列表自动为空）
    selected_users = $('#filter1 input[name="uid"]:checked').map(function() {
      return $(this).val();
    }).get();
  }
  console.log(selected_users);
}

功能说明 #

• 点击单个复选框：selected_users会实时更新为当前选中的单个复选框值，同时自动同步全选框的状态（所有单个复选框都选中时，全选框自动选中）
• 点击全选框选中：所有单个复选框同步选中，selected_users包含所有单个复选框的值
• 点击全选框取消：所有单个复选框同步取消选中，selected_users为空列表

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