时间戳

首页 > 解决方案 > 复选框始终显示未定义。无法获得 .checked 的功能

javascript - 复选框始终显示未定义。无法获得 .checked 的功能

问题描述

我似乎无法让这些复选框正常工作。我想检查每个复选框以查看是否已检查，然后我将使用该数据稍后在我的程序中运行另一个代码片段。问题是，无论复选框是否被选中，它总是返回一个未定义的值。

这是JS中的功能。

    function meal_update_multi() {
        let multimeal = document.getElementsByName('breakfast')
        let brek = document.getElementById('#breakfast_selector')
        let lunch = document.getElementById('#lunch_selector')
        let din = document.getElementById('#dinner_selector')
            if (multimeal.checked) {
                console.log('YOU CHECKED ALL THE BOXES DUMMY')
            }
                else 
                    alert('YOU DID NOT CHECK ALL THE BOXES')
                    console.log(multimeal.checked)
        }

这是与之配对的 HTML

                <form id = 'remove_meal_mutiple_choice' onsubmit = 'return false'>
                    <h1>What Meals do you want to remove?</h1>
                    <input type = 'checkbox' name = 'breakfast' id = 'breakfast_selector'>
                        <label for = 'breakfast_selector'>Breakfast</label>
                    <input type = 'checkbox' name = 'lunch' id = 'lunch_selector'>
                        <label for = 'lunch_selector'>Lunch</label>
                    <input type = 'checkbox' name = 'dinner' id = 'dinner_selector'>
                        <label for = 'dinner_selector'>Dinner</label>
                    <button class = 'submit' type = 'submit' onclick = 'update_meals()'>Submit</button>
                </form>

标签： javascripthtml

解决方案

document.getElementsByName('breakfast')将返回一个数组，而不是单个节点。因此，您必须遍历该数组以检查是否已检查所有内容。此外，所有复选框的名称应该相同，以使用document.getElementsByName

function meal_update_multi() {
  let multimeal = document.getElementsByName('breakfast');
  let allChecked = true;
  multimeal.forEach((node) => allChecked &= node.checked);
  if (allChecked) {
    console.log('YOU CHECKED ALL THE BOXES DUMMY')
  }
  else {
    alert('YOU DID NOT CHECK ALL THE BOXES');
  }
  // console.log(multimeal.checked)
}
<form id='remove_meal_mutiple_choice' onsubmit='return false'>
  <h1>What Meals do you want to remove?</h1>
  <input type='checkbox' name='breakfast' id='breakfast_selector'>
  <label for='breakfast_selector'>Breakfast</label>
  <input type='checkbox' name='breakfast' id='lunch_selector'>
  <label for='lunch_selector'>Lunch</label>
  <input type='checkbox' name='breakfast' id='dinner_selector'>
  <label for='dinner_selector'>Dinner</label>
  <button type="button" onclick="meal_update_multi()">meal_update_multi</button>
  <button class='submit' type='submit' onclick='update_meals()'>Submit</button>
</form>

推荐阅读