如何使用jQuery将选中复选框的值存储到数组中

没问题，这其实是jQuery里很常见的操作，我来给你一步步讲清楚怎么实现：

首先先提一下你的HTML代码里有个小笔误：表头的复选框标签多了一个引号，应该改成 <input type="checkbox" class="w3-check" id="select-all" />，不然可能会影响渲染。另外，记得给表格tbody里每个行的复选框加上value属性（比如对应用户ID或者其他你需要存储的数据），不然拿到的会是空值哦。

接下来是核心实现方法，有几种方式，我给你推荐最常用且简洁的：

基础实现：获取所有选中复选框的值 #

直接用jQuery的选择器选中所有被勾选的复选框，然后提取它们的value到数组里：

// 获取所有选中的复选框值，存入数组
const selectedValues = $('input[type="checkbox"]:checked').map(function() {
    // 返回当前复选框的value值
    return this.value;
}).get();

// 可以打印出来看看结果
console.log(selectedValues);

精准筛选：只获取表格内的复选框值 #

如果页面上还有其他复选框，不想把它们包含进来，就精准定位到你的#user表格里的tbody部分：

const selectedValues = $('#user tbody input[type="checkbox"]:checked').map(function() {
    return this.value;
}).get();

额外补充：全选复选框的联动逻辑 #

既然你有个全选的复选框，顺便给你加上联动功能，点击全选时自动选中/取消所有行内的复选框：

// 给全选框绑定change事件
$('#select-all').on('change', function() {
    // 把tbody里的所有复选框的checked状态设置成全选框的状态
    $('#user tbody input[type="checkbox"]').prop('checked', $(this).is(':checked'));
});

这样操作后，当你需要获取选中的值时，调用上面的代码就能得到一个包含所有选中复选框value的数组啦，不管是手动勾选还是全选的都能拿到。

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