Checkbox的.checked属性始终返回undefined，相关功能无法正常运行如何解决？

• document.getElementsByName 方法返回的是同名元素组成的NodeList集合，并非单个DOM元素，集合本身没有checked属性，直接读取必然返回undefined。
• document.getElementById 方法仅需要传入id的纯文本值，不需要添加CSS选择器前缀#，代码中传入#breakfast_selector 无法匹配到对应元素，返回null，读取null的checked属性也会返回undefined。
• 按钮绑定的点击事件调用的函数是update_meals()，和定义的meal_update_multi() 名称不匹配，点击按钮时不会执行你写的逻辑代码。
• else分支没有添加花括号包裹代码块，只有紧跟的alert语句属于else逻辑，后续的console.log 无论判断结果如何都会执行。

1. 修正getElementById的传参，去掉前缀#
2. 统一函数命名，保证按钮绑定的函数名和定义的函数名一致
3. 直接读取三个复选框元素的checked属性做判断，无需使用getElementsByName获取集合
4. 给else分支添加花括号，保证逻辑块正确包裹

修复后代码示例 #

JS代码 #

// 函数名和按钮onclick绑定的名称保持一致
function update_meals() {
    // 去掉参数中的#，正确获取单个复选框元素
    const brek = document.getElementById('breakfast_selector')
    const lunch = document.getElementById('lunch_selector')
    const din = document.getElementById('dinner_selector')
    
    // 判断三个复选框是否全部勾选
    if (brek.checked && lunch.checked && din.checked) {
        console.log('YOU CHECKED ALL THE BOXES DUMMY')
    } else {
        alert('YOU DID NOT CHECK ALL THE BOXES')
        // 打印各复选框勾选状态便于调试
        console.log('早餐勾选状态：', brek.checked)
        console.log('午餐勾选状态：', lunch.checked)
        console.log('晚餐勾选状态：', din.checked)
    }
}

可选优化：批量获取勾选的复选框 #

如果需要动态获取所有被勾选的餐食，不需要逐个判断，可以直接用选择器批量获取：

// 获取所有被勾选的餐食复选框
const checkedMeals = document.querySelectorAll('input[type="checkbox"]:checked')
// 可通过checkedMeals.length判断勾选数量，也可以遍历获取每个勾选的值

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