我正在尝试循环复选框和收音机，但我无法弄清楚？答案

【问题标题】：I'm trying to loop checkboxes and radios but I can't figure it out?我正在尝试循环复选框和收音机，但我无法弄清楚？
【发布时间】：2021-04-06 16:18:59
【问题描述】：

我正在尝试根据是否选中复选框和收音机来显示警报消息。我的问题是，此代码仅在选中或未选中所有复选框/收音机时才有效，如果我跳过一个，它仍然会检查警报。做错了什么？我试图查看有关此主题的一些先前问题。

document.querySelector('#id').addEventListener('click', (e) => {   
    e.preventDefault();
    if (!$('element#id').find('input[type="checkbox"]').is(':checked') && !$('element#id').find('input[type="radio"]').is(':checked')) {
      alert('not checked')
      return false;
    } else {
      alert('checked')
    }
  })

我也试过这个，如果我只选中一个它会提醒“已选中”，如果没有选中，当我按下按钮时没有任何反应......？也许这个问题有一个简单的解决方案？ :-)

  var inputs = document.querySelectorAll('element#id input[type="checkbox"]:checked, element#id input[type="radio"]:checked');
  for(var i = 0; i< inputs.length; i++){
    if(inputs[i].checked){
      alert('checked')
    }else{
      alert('not checked')
    }
  }

这是我的 html 标记

<input type="checkbox" id="1" class="myclass">
<input type="checkbox" id="2" class="myclass">
<input type="checkbox" id="3" class="myclass">
<input type="checkbox" id="4" class="myclass">
<input type="radio" id="5" class="myclass" name="a"><input type="radio" id="6" class="myclass" name="a">
<input type="radio" id="7" class="myclass" name="b"><input type="radio" id="8" class="myclass" name="b">
<input type="radio" id="9" class="myclass" name="c"><input type="radio" id="10" class="myclass" name="c">
<input type="radio" id="11" class="myclass" name="d"><input type="radio" id="12" class="myclass" name="d">
<input type="radio" id="13" class="myclass" name="e"><input type="radio" id="14" class="myclass" name="e">
<input type="radio" id="15" class="myclass" name="f"><input type="radio" id="16" class="myclass" name="f">
<input type="checkbox" id="17" class="myclass">
<input type="checkbox" id="18" class="myclass">

如果我在检查所有输入的情况下运行它，我会得到 18 true，而不是检查 18 false。我的目标是必须选中所有复选框，必须选中每对中的一个无线电。如果您错过了一个复选框或收音机，您会收到警报/警告。希望这能解释更多:-)

 const checkboxElement = document.querySelectorAll('.myclass');
    checkboxElement.forEach(item => {
      console.log(item.checked)
    })

【问题讨论】：

标签： javascript html forms

【解决方案1】：

首先，在使用querySelectorAll 时尝试使用.forEach，并且您提到else 不起作用所以尝试else if。另外，我已经按类.myclass 选择了它。像这样：

let inputs = document.querySelectorAll('element#id input[class="myclass"]');
inputs.forEach(input=>{
    if(input.checked) {
        alert('Checked');
    } else if(!input.checked) { // try this. using an `else if` because you mentioned above `else` isn't working
        alert('Not Checked');
    }
});

这应该可以解决问题，同时使代码看起来更简洁。如果它不起作用，请告诉我。

forEach 是一个函数，它接受一个回调参数。回调的第一个参数是列表中的元素。它遍历您在其上运行 forEach 的列表，并为每次迭代运行回调。

这是一个例子：

["answering", "stackoverflow"].forEach(text=>{
    console.log(text);
});
// result:
// answering
// stackoverflow

结果将是：

answering
stackoverflow

开发者说明：使用分号。

【讨论】：

我尝试了forEach 和else if，但当我按下未选中收音机/复选框的按钮时仍然没有。只需选中一个复选框，forEach 循环为真。
我不确定我是否理解.. @Dalle
我展示了一些 html 标记和我的问题 :-)
添加了一些更改，现在应该可以使用了。只需将“myclass”替换为只有您的复选框和无线电输入具有的唯一类

【解决方案2】：

这将是满足您需求的简单解决方案

 const checkboxElement = document.querySelectorAll('.checkbox');
  
 function changeCheckbox() {
   const isCheckedAll =  Array.from(checkboxElement).every(el => el.checked)
    if(isCheckedAll) {
      return alert('checked')
    } else {
      return alert('not checked')
    } 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<input class="checkbox"
       type='checkbox' 
       onChange="changeCheckbox()">
 <input class="checkbox" 
        type='checkbox' 
        onChange="changeCheckbox()">

</body>
</html>

外部链接：https://jsbin.com/vanobifora/1/edit?html,js,console,output

【讨论】：

我试过const checkboxElement = document.querySelectorAll('.classname'); const isCheckedAll = Array.from(checkboxElement).every(el => el.checked) if(isCheckedAll) { return alert('checked') } else { return alert('not checked') } ，但即使选中了它也会返回not checked
你都检查了吗？我确定您对 alert() 感到困惑，您可以将其替换为 console.log 并查看输出
我无法检查所有复选框，因为其中有几个复选框是单选框，您不能在每对中检查多个复选框，请参阅上面的代码。
如何识别每一对？