javascript javascript验证多个无线电选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14342452/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript validate multiple radio selections
提问by Pete_1
I realize this isn't a new topic and that it has been asked before. I have read through various answers and, although I am getting better at Javascript, am confused by most of the responses.
我意识到这不是一个新话题，之前已经被问到过。我已经阅读了各种答案，虽然我在 Javascript 方面越来越好，但对大多数答案感到困惑。
I am asking my users to give a rating, where they rate both a category and company. I want Javascript to validate that both sets of radio buttons have an answer marked, and if possible, give separate alerts depending on the one that isn't marked.
我要求我的用户进行评分，他们对类别和公司进行评分。我希望 Javascript 验证两组单选按钮都标记了答案，如果可能，根据未标记的那个给出单独的警报。
My code (omitting the tables they are wrapped in)
我的代码（省略了它们所包含的表）
<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">
</form>
Javascript:
Javascript：
function validaterating() {
var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratings.companyrate;
function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}
Now, I know this works to validate the first rating as I have it and is the validation setup that I think makes the most sense to me. However, I can't get the second question (rate2) to validate. I've tried another for loop, using the && operator, and it stops working when I try to get the second to validate. Using the code as I'm writing it, how is that possible?
现在，我知道这可以验证我拥有的第一个评级，并且是我认为对我最有意义的验证设置。但是，我无法验证第二个问题 (rate2)。我尝试了另一个 for 循环，使用 && 运算符，当我尝试让第二个进行验证时，它停止工作。在我编写代码时使用它，这怎么可能？
Thanks for your time.
谢谢你的时间。
回答by Yusaf Khaliq
http://jsfiddle.net/R5M5Y/
http://jsfiddle.net/R5M5Y/
HTML
HTML
<form onsubmit="return test();" action="blah.php" method="post" name="ratings">
category:
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
company:
<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">
<input type='submit' />
</form>
JavaScript
JavaScript
function test(){
var category = document.getElementsByName("categoryrate");
var check1 = 0;
for(i=0;i<category.length;i++){
if(category[i].checked){
check1++;
break;
}
}
var company = document.getElementsByName("companyrate");
var check2 = 0;
for(i=0;i<company.length;i++){
if(company[i].checked){
check2++;
break;
}
}
if(check1 && check2){
}else{
alert("you must select ratings for both company and category");
return false;
}
}
回答by jul
You could do something like this:
你可以这样做：
function validaterating() {
return validateGroup(document.getElementsByName("categoryrate")) && validateGroup(document.getElementsByName("companyrate"))
}
function validateGroup(elements) {
for (var i = 0; i < elements.length; i++) {
if (elements[i].checked) return true;
}
return false;
}
回答by kinsho
Is that all the JavaScript you have for validating both sets of radio buttons? First off, you have two functions, both with the same name (validaterating). Second, you forget to add a closing bracket at the end in order to close out the wrapper function.
这是您用于验证两组单选按钮的所有 JavaScript 吗？首先，您有两个函数，它们都具有相同的名称（验证）。其次，您忘记在末尾添加一个右括号以关闭包装函数。
What you should do is set up two variables, both of them serving as boolean flags. Then loop through each set of radio buttons in order to determine if a button has been selected. If so, set the corresponding flag to true, otherwise false. Then at the end, test to see if both flags have been set to true. If not, throw the alert.
您应该做的是设置两个变量，它们都用作布尔标志。然后遍历每组单选按钮以确定是否已选择按钮。如果是，则将相应的标志设置为真，否则为假。然后在最后，测试两个标志是否都设置为 true。如果没有，抛出警报。
回答by Matthew James Davis
function validaterating() {
var rate1 = document.forms.ratings.categoryrate; var rate2 = document.forms.ratings.companyrate;
function validaterating() { for (var i=0; i < rate1.length; i++) { if (rate1[i].checked) return true; } alert("Please rate the category."); return false; }
功能验证（）{
var rate1 = document.forms.ratings.categoryrate; var rate2 = document.forms.ratings.companyrate;
function validaterating() { for (var i=0; i < rate1.length; i++) { if (rate1[i].checked) return true; } alert("请给类别打分。"); 返回假；}
This code has numerous syntax errors. I'm not sure why there are two validate rating functions. I'm going to assume for now that you copied them down wrong and your code actually works.
这段代码有很多语法错误。我不确定为什么有两个验证评级功能。我现在假设您复制错误并且您的代码确实有效。
The problem here is that you return true after finding one in rate1. If you had any code thereafter validating rate2 it will not be hit because the function has already returned.
这里的问题是在 rate1 中找到一个后返回 true。如果此后您有任何代码验证 rate2 它将不会被命中，因为该函数已经返回。
One solution might be to create two boolean variables categoryChecked, companyChecked, and initalize them to false. Then, loop through document.forms.rating.categoryrate[i].checked for each i and if any of them are true, then set categoryChecked = true. Do the same for companyChecked.
一种解决方案可能是创建两个布尔变量 categoryChecked、companyChecked，并将它们初始化为 false。然后，为每个 i 循环遍历 document.forms.rating.categoryrate[i].checked，如果其中任何一个为真，则设置 categoryChecked = true。对 companyChecked 执行相同的操作。
Then, finish with
然后，完成
return categoryChecked && companyChecked
回答by Nattawat love thailand
function validateForm() {
var radios = document.getElementsByTagName('input');
var value;
var sum_radio=0;
var formValid=0;
for (var c = 0; c < radios.length; c++){
if (radios[c].type =='radio'){
sum_radio = sum_radio + 1;
}
}
alert('count radio'+sum_radio);
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) {
// get value, set checked flag or do whatever you need to
value = radios[i].value;
// alert('value'+value);
alert('good'+formValid);
formValid = formValid + 1;
}
}
if (formValid==sum_radio){
alert('yes');
return true;
}else{
alert('no');
return false
}
}<form name="form1" action="#" onsubmit="return validateForm()" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="radio0" name="yesno" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio1" name="yesno1" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio2" name="yesno2" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio3" name="yesno3" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio4" name="yesno4" value="2"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="radio5" name="yesno5" value="2"/>
<br/>
<input type="submit" value="Submit"><br/>
</form>