如何检测复选框列表中状态变更的选项并收集其值？

我有如下复选框列表：

<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056001">
<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056002">
<input checked="checked" class="inv_doc_ids[]" id="inv_doc_ids" name="inv_doc_ids[]" type="checkbox" value="01000290056003">

我需要检测哪些复选框的状态发生了变更（选中→未选中、未选中→选中），并收集这些选项的值。目前编写的代码如下：

var collectID = [];
$.each($("input[class='inv_doc_ids[]']:checked"), function () {
    collectID.push($(this).val());
});
console.log(collectID);

该代码仅能收集当前处于选中状态的复选框值，返回数组 => [01000290056001, 01000290056002, 01000290056003]。请问需要添加什么代码才能实现需求？我曾考虑添加类似如下代码，但不确定是否正确：

var show = $(this),
    colllect = (input.attr("checked") || "") === "checked";
return (colllect !== input.attr("checked"));

解决方案 #

要实现检测复选框状态变更并收集变更值的需求，核心思路是先记录初始的选中状态，之后在状态变化时和初始状态对比，找出差异项。下面是具体的实现步骤：

1. 先存好初始选中的ID集合 #

页面加载完成后，先把所有复选框的初始选中状态记录下来，用Set来存会更方便对比：

// 页面加载完成时，记录初始选中的ID
var initialCheckedIDs = new Set();
$("input[class='inv_doc_ids[]']").each(function() {
    if ($(this).is(":checked")) {
        initialCheckedIDs.add($(this).val());
    }
});

2. 监听复选框的变化事件 #

给每个复选框绑定change事件，每次状态变化时，对比当前状态和初始状态，就能判断是“新增选中”还是“取消选中”：

// 监听复选框的状态变化
$("input[class='inv_doc_ids[]']").on("change", function() {
    const currentVal = $(this).val();
    const isNowChecked = $(this).is(":checked");
    
    // 对比初始状态判断变更类型
    if (isNowChecked && !initialCheckedIDs.has(currentVal)) {
        console.log("从未选中变为选中：", currentVal);
        // 这里可以把这个值加入你的变更收集数组
    } else if (!isNowChecked && initialCheckedIDs.has(currentVal)) {
        console.log("从选中变为未选中：", currentVal);
        // 同样加入变更收集数组
    }
});

3. 批量获取所有变更的ID（比如提交时） #

如果需要在某个时机（比如点击提交按钮）一次性获取所有状态变更的ID，可以写个工具函数：

function getChangedCheckboxIDs() {
    const changedIDs = {
        newlyChecked: [], // 新增选中的ID
        unchecked: []     // 取消选中的ID
    };
    
    $("input[class='inv_doc_ids[]']").each(function() {
        const val = $(this).val();
        const isCheckedNow = $(this).is(":checked");
        const wasCheckedInitially = initialCheckedIDs.has(val);
        
        if (isCheckedNow && !wasCheckedInitially) {
            changedIDs.newlyChecked.push(val);
        } else if (!isCheckedNow && wasCheckedInitially) {
            changedIDs.unchecked.push(val);
        }
    });
    
    return changedIDs;
}

// 示例：点击提交按钮时获取所有变更
$("#submitButton").on("click", function() {
    const changes = getChangedCheckboxIDs();
    console.log("所有状态变更的ID：", changes);
});

关于你尝试的代码的小说明 #

你之前写的那段代码有两个小问题：一是input变量没有定义，二是用attr("checked")判断状态不准确——因为attr获取的是DOM元素的初始属性值，状态变化后不会更新，应该用is(":checked")或者prop("checked")来获取实时状态，这才是当前的真实选中状态。

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