获取动态添加复选框的选中与未选中值的技术问询

针对你动态添加同名复选框（name="lead_check[]"）的场景，我来分两种核心需求给你具体的解决方案：

一、只获取选中的复选框值 #

这是最常用的场景，不管是静态还是动态生成的复选框，都可以直接通过选择器筛选出已选中的元素，再提取对应值：

jQuery 实现 #

// 获取所有选中的lead_check[]复选框的值
const checkedValues = $('input[name="lead_check[]"]:checked').map(function() {
    // 注意：如果复选框没显式设置value，默认值是'on'，建议给每个复选框设置唯一value
    return this.value || 'on';
}).get();

console.log('选中的复选框值：', checkedValues);

原生 JavaScript 实现 #

如果不想依赖jQuery，原生JS也能轻松实现：

const checkedBoxes = document.querySelectorAll('input[name="lead_check[]"]:checked');
const checkedValues = Array.from(checkedBoxes).map(box => box.value || 'on');

console.log('选中的复选框值：', checkedValues);

二、获取所有复选框的状态（包括未选中的） #

如果需要统计每一个复选框的选中状态和对应值，就需要遍历所有同名复选框，逐个记录状态：

jQuery 实现 #

const allCheckboxStates = $('input[name="lead_check[]"]').map(function() {
    return {
        value: this.value || 'on',
        isChecked: this.checked // 布尔值，true为选中，false为未选中
    };
}).get();

console.log('所有复选框状态：', allCheckboxStates);

原生 JavaScript 实现 #

const allBoxes = document.querySelectorAll('input[name="lead_check[]"]');
const allStates = Array.from(allBoxes).map(box => ({
    value: box.value || 'on',
    isChecked: box.checked
}));

console.log('所有复选框状态：', allStates);

额外优化建议 #

1. 给复选框设置唯一value：默认情况下复选框的value是'on'，多个复选框会无法区分，建议动态添加时用计数器生成唯一值：

// 修改你的动态添加代码，加入计数器生成唯一value
let checkboxIndex = 1; // 初始已有一个复选框，也可以从2开始计数
$('#includes').click(function(e) {
    e.preventDefault();
    checkboxIndex++;
    $('#include-fields').append(`<div class="holder-includes">
        <input type="checkbox" name="lead_check[]" value="option_${checkboxIndex}">
        <a href="#" class="remove-include">移除</a>
    </div>`);
});

2. 处理移除按钮的事件委托：因为移除按钮是动态生成的，必须用事件委托绑定点击事件，否则新添加的按钮会失效：

$('#include-fields').on('click', '.remove-include', function(e) {
    e.preventDefault();
    $(this).closest('.holder-includes').remove();
});

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