复选框联动失效排查及代码生效原理咨询

需求与问题 #

• 需求：当类为colour-input的复选框被勾选时，强制ID为att_$var的另一复选框同步状态
• 问题：原有代码无法实现联动，已确认目标复选框ID正确
• 补充：在原有函数内添加指定代码片段后功能恢复正常，但不清楚为何需要再次调用.each()方法，请求原理讲解

原有代码 #

$('.colour-input').each(function () {
    $(this).change(function () {
        if (this.checked) {
            colourArray.push($(this).val());
            colourArray.sort(function(a, b){return a-b});
        } else {
            var index = colourArray.indexOf($(this).val());
            if (index > -1) {
                colourArray.splice(index, 1);
            }
        }
        $.ajax({
            url: "php/ColourArrayHandle.php",
            // The successful jQuery process will be handled through ajax and PHP.
        });
    });
});

生效的代码片段 #

$(presentID).each(function () {
    if(this.checked){
        console.log("The box was checked.");
    } else {
        console.log("The box is not checked.");
    }
});

原理讲解 #

首先得明确：jQuery选择器返回的是jQuery对象集合——哪怕只匹配到单个DOM元素，它依然是一个长度为1的集合，不是原生DOM元素本身。

你添加的这段.each()代码能生效，核心原因有这几点：

1. 强制触达真实DOM节点：有时候页面元素是动态生成的，或者渲染时机有延迟，直接用$(presentID)操作可能没真正绑定到实际DOM元素。.each()会遍历集合里的每一个匹配元素，相当于手动确认并操作存在的DOM节点，避免了直接操作jQuery对象可能出现的“空集合”或“未生效”问题。
2. 直接操作原生DOM属性：在.each()的回调里，this指的是原生的复选框DOM元素，直接访问this.checked比用jQuery的.prop('checked')更直接，不会有jQuery封装层带来的属性同步延迟问题，状态读取/设置更准确。
3. 隐性的元素存在校验：如果$(presentID)没匹配到任何元素，.each()的回调根本不会执行；一旦执行，就说明确实找到了目标元素，相当于做了一次隐性的存在性验证，避免了直接操作不存在元素导致的静默失败。

其实你也可以不用.each()，直接用$(presentID)[0].checked来访问原生元素的属性，但.each()的写法更通用——如果未来presentID能匹配多个元素，代码不用修改就能批量处理，这也是它的实用之处。

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