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

Posted 2023-02-21

【中文标题】如果有一个未选中，如何检查多无线电组

【英文标题】：How to Check Multi radio Groups if there is one Left Unchecked

【发布时间】：2021-07-30 16:28:44

【问题描述】：

我想在提交后检查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;

【参考方案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>

【讨论】：

谢谢，我去掉了一半的代码gist.github.com/Z3yko/bc3fc61ca701305e9558fdb2a4069f9c

不知道为什么你仍然推送到阵列。似乎过于复杂

问题是我不知道会有多少电台组

啊……这在问题中并不明显。一个想法是将它们包装在一个容器中，其类类似于“radio-group”。然后计算这些元素

哇，谢谢你，这真是直截了当！

【参考方案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>

【讨论】：

哇，我喜欢您通过定义checkRadios 的有效性来检查您的方式，谢谢。