如果有一个未选中，如何检查多无线电组

Question

我想在提交后检查salad 或side dish 是否未选中。

我有一个可行的方法，但它非常难看，我相信对于这样一个简单的任务有更简单的解决方案

我的方法：

function radiosChecker(){
let radioGroups = [];
let radios = document.querySelectorAll(`input[name^="${foodId}_"][type="radio"]`); // Get all radios first

for(let i = 0; i < radios.length; i++){ // Creating an array of elements each one of them representing its group
    if(i == 0){
        radioGroups.push(radios[i]);
        continue;
    }
    if(i > 0){
        if(radios[i].name != radios[i-1].name){
            radioGroups.push(radios[i])
        }
    }
}
let okays = [];
radioGroups.forEach((ele)=>{
    let group = document.querySelectorAll(`input[name="${ele.name}"]`); // Get all radios with same name
    for(let i = 0;i < group.length; i++){ // loop untill u find one checked and append a flag to the okays 
        if(group[i].checked){
            okays.push(true);
            break;
        }
    }
})
if(radioGroups.length == okays.length){
    return true;
}else{
    return false;
}

}

Answer 1

您可以通过在querySelectorAll() 中使用:checked 选择器来简化此操作，然后测试长度是否为2

document.querySelector('button').addEventListener('click', function() {
  const checked = document.querySelectorAll('.salad-radio:checked, .side-radio:checked'),
    isValid = checked.length === 2;
  console.log('Is valid: ', isValid);
})

<button>
Validate radios
</button>


<div>
  <h3>Salad</h3>
  One<input type="radio" class="salad-radio" value="1" name="salad-type"> 
  Two<input type="radio" class="salad-radio" value="2" name="salad-type"> 
  Three<input type="radio" class="salad-radio" value="3" name="salad-type">
</div>
<div>
  <h3>Side</h3>
  One<input type="radio" class="side-radio" value="1" name="side-type"> 
  Two<input type="radio" class="side-radio" value="2" name="side-type"> 
  Three<input type="radio" class="side-radio" value="3" name="side-type">
</div>

Answer 2

无线电输入通常由name 属性设置。在这里，我展示了如何通过name 处理无线电组并提醒那些没有选择值的无线电。

• 具体获取所有收音机（以及唯一名称）
• 按名称处理，选择那些被选中的
• 告诉我是否没有通过使用该长度的真/假性质比较长度来检查它（如果它不是 1，则不选择它）。 （同checkRadios.length < 1
• 你添加了更多的收音机组，代码没有改变
• 您不必提前知道您有多少组无线电

let allRadios = document.querySelectorAll('input[name][type="radio"]');
let names = [];
allRadios.forEach(function(element, index, allRadios) {
  names.push(element.name);
});
let uniqueNames = [...new Set(names)];

function checkMeOut(event) {
  let tellme = "";
  uniqueNames.forEach(name => {
    let checkRadios = document
      .querySelectorAll('input[name="' + name + '"][type="radio"]:checked');
    if (!checkRadios.length) {
      tellme += "Not selected " + name + '\r\n';
    }
  });
  if (tellme.length > 0) {
    alert(tellme);
  }
}

let checkem = document.getElementById('check-em');
checkem.addEventListener('click', checkMeOut);

<div>
  <h4>My Salad</h4>
  <label>Garden</label>
  <input type="radio" value="1" name="salad-type">
  <label>Slaw</label>
  <input type="radio" value="2" name="salad-type"> 
  <label>Cobb</label>
  <input type="radio" value="3" name="salad-type">
</div>
<div>
  <h4>My Side</h4>
  <label>Fries</label>
  <input type="radio" value="1" name="side-type">
  <label>Drink</label>
  <input type="radio" value="2" name="side-type">
  <label>Orange</label>
  <input type="radio" value="3" name="side-type">
</div>
<div>
  <h4>Drink</h4>
  <label>Water</label>
  <input type="radio" value="1" name="drink-type">
  <label>Coke</label>
  <input type="radio" value="2" name="drink-type">
  <label>Beer</label>
  <input type="radio" value="3" name="drink-type">
</div>
<button type="button" id="check-em">Radio - Check All</button>