验证是不是选择了所有单选按钮或不在按钮上单击

Posted 2023-03-05

【中文标题】验证是不是选择了所有单选按钮或不在按钮上单击

【英文标题】：Validate that ALL radio buttons are selected or NOT on button Click验证是否选择了所有单选按钮或不在按钮上单击

【发布时间】：2014-04-13 11:48:15

【问题描述】：

我对 javascript 很陌生，我有这个在按钮单击时调用的 Javascript 函数。我想要做的是，如果所有单选按钮都没有被选中，无论它们是是或否，并且如果它们都被选中，则显示一个警报，调用下面的另一个名为 addPoints() 的函数。

function validateForm()

    var inputs = document.querySelectorAll('input[type="radio"]');
       var  formValid = false;
       for(var i=0;i<inputs.length;i++)
           if(inputs[i].checked)
               formValid  = true;

            
       
      if(!formValid )   
           alert("Please answer all questions!");
       

else

addPoints();


 

以下是我的单选按钮的显示方式

<form name="form1" id="form1">
<input id="rdo1" type="radio" name="q1" value="10">Yes<br>
<input id="rdo2" type="radio" name="q1" value="0">No
</form>

<form name="form2" id="form2">
<input id="rdo3" type="radio" name="q2" value="10">Yes<br>
<input id="rdo4" type="radio" name="q2" value="0">No
</form>

 <form name="form3" id="form3">
<input id="rdo5" type="radio" name="q3" value="10">Yes<br>
<input id="rdo6" type="radio" name="q3" value="0">No
</form>

<button type="submit" onclick="validateForm()">Score?</button>

如果我在页面加载时没有选择任何单选按钮，并且我使用该按钮调用函数 validateForm()，则消息是正确的，并指出“请回答所有问题”。如果我从任何组中选择是或否，它会调用 addPoints 函数。我只希望它在从所有无线电组中选择所有是或否时调用该函数。

【参考方案1】：

DEMO

代码：

function addPoints() 
    alert("Adding points");


function validateForm() 

    var inputs = document.querySelectorAll('input[type="radio"]'),
        // An empty array
        checker = [];

    for (var i = 0; i < inputs.length; i++) 
        if (inputs[i].checked) 
            // Whenever find a checked element, push it in checker array
            checker.push(true);
        
    

    // Since, there are only 3 radio groups, according to OP,
    // call addPoints when all 3 (yes/no) have been selected
    if (checker.length === 3) 
        addPoints();
    
    // Show an alert if none has been selected
    else if (checker.length === 0) 
        alert("Please answer all questions!");
     else 
        // Add something you may want
    

【讨论】：

我做了一点改动，但这引导我朝着正确的方向前进，非常感谢！ 13 是我有多少组。 if (checker.length === 13) getScore(); else alert("请回答所有问题！");

@AlexMcPherson 很高兴知道我能帮上忙！

【参考方案2】：

不是遍历每个单选按钮，而是遍历每个表单，并在每个 from 中遍历单选按钮

【讨论】：

这会对逻辑产生影响还是更整洁？

【参考方案3】：

你可以使用 Jquery 来做到这一点像这样我使用复选框:)

function validateForm()

  if($('input[type="checkbox"]:checked').length != $('input[type="checkbox"]').length)
               alert("Please answer all questions!");
        else
               alert("ok!");