原生JS实现：任意复选框勾选时设置变量为true的问题修复

问题描述 #

我有一组共5个checkbox，需求是：当任意一个checkbox被勾选时，将某个变量设置为true；当所有checkbox都未勾选时，该变量保持假值。

当前代码存在逻辑问题：勾选多个复选框后取消其中一个，变量会被错误设为false，即便仍有其他复选框处于勾选状态。多数找到的解决方案仅适用于单个复选框或依赖jQuery，现寻求原生JavaScript的正确实现方案。

当前使用的代码：

JS代码 #

let button;
let check_this = document.querySelectorAll('.check_this')

Array.from(check_this).forEach(function(checbox){
    checbox.addEventListener("change", function(){
        if(checbox.checked){
            button = true
        }else{
            button = false
        }
    });
});

HTML代码 #

<input class="check_this" type="checkbox" value="1">
<input class="check_this" type="checkbox" value="2">
<input class="check_this" type="checkbox" value="3">
<input class="check_this" type="checkbox" value="4">
<input class="check_this" type="checkbox" value="5">

解决方案 #

问题出在当前代码只判断了当前操作的单个复选框状态，没有检查所有复选框的整体状态。正确的做法是每次复选框状态变化时，遍历所有复选框，判断是否有至少一个被勾选。

优化后的JS代码 #

let button = false;
const checkboxes = document.querySelectorAll('.check_this');

// 定义状态检查函数
function updateButtonStatus() {
    // 检查是否有任意复选框被勾选
    button = Array.from(checkboxes).some(checkbox => checkbox.checked);
}

// 给每个复选框绑定change事件
Array.from(checkboxes).forEach(checkbox => {
    checkbox.addEventListener('change', updateButtonStatus);
});

// 页面加载时初始化状态（可选，防止页面刷新时已有勾选的情况）
updateButtonStatus();

代码说明 #

• 使用Array.from()将NodeList转为数组，调用some()方法：只要数组中有一个元素满足checkbox.checked为true，就返回true，否则返回false。
• 将状态判断逻辑抽成独立函数updateButtonStatus，便于复用和维护。
• 可选的初始化调用：确保页面加载时如果已有复选框被勾选，变量button能正确初始化为true。

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