单选按钮验证 [英] Radio Buttons Validation
本文介绍了单选按钮验证的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在验证像这样的单选按钮，但它仅对第一个有效，并退出循环.你能提出任何想法吗?
Hi,
I am validating radio buttons like this but it is working only for first one and exit from loop. Can you suggest any idea.
<
script type="text/javascript">
function testvalues()
{
// Get the group, this returns an HTMLCollection
var radio1 = document.forms["frm1"]["radio1"];
// radio1 is an HTMLcollection
if (!radio1[0].checked && !radio1[1].checked)
{
var labelanswer = document.getElementById('labelanswer');
if (labelanswer != null)
{
// change the color of the entire line (span)
labelanswer.style.background="red";
}
return false;
}
// validated, go to action page
return true;
}
</script>
</head>
<body>
<form name="frm1" onsubmit="return testvalues();">
<span id="labelanswer">Answer:
Yes<input type="radio" name="radio1" value="yes" />
No<input type="radio" name="radio1" value="no" /></span><br />
<label for="labelanswer">Question:
Yes<input type="radio" name="radio1" value="yes" />
No<input type="radio" name="radio1" value="no" /></label><br />
<input type="submit" value="Submit" />
</form>
</body>
推荐答案
您必须按名称属性对它们进行分组.
You have to group them by the name attribute.
<span id="answer1">Question 1:
Yes<input type="radio" name="Question1" value="yes" />
No<input type="radio" name="Question1" value="no" /></span>
<span id="answer2">Question 2:
Yes<input type="radio" name="Question2" value="yes" />
No<input type="radio" name="Question2" value="no" /></span>
<span id="answer3">Question 3:
Yes<input type="radio" name="Question3" value="yes" />
No<input type="radio" name="Question3" value="no" /></span>
var group1 = document.forms["frm1"]["Question1"];
var group2 = document.forms["frm1"]["Question2"];
var group3 = document.forms["frm1"]["Question3"];
并且在设置颜色时，每一行都有唯一的ID(answer1，answer2，answer3).
And when setting the color, every row has a unique id (answer1, answer2, answer3).
这里有一个示例，其中包含四个不同的问题，这些问题均在循环中得到验证. br/>
Here''s an example with four different questions that are all validated inside a loop.
<html>
<head>
<script type="text/javascript">
function testvalues()
{
var isvalid = true;
var i;
// test all questions
for (i=1;i<5;i++)
{
// find the radiogroup
var radio = document.forms["frm1"]["question"+i];
// clear the error
var labelanswer = document.getElementById("answer"+i);
labelanswer.style.background="none";
// radio is an HTMLcollection
if (!radio[0].checked && !radio[1].checked)
{
// change the color of the entire line (span)
labelanswer.style.background="red";
// we want to validate all lines, so don't stop here
isvalid = false;
}
}
// return the result
return isvalid;
}
</script></head>
<body>
<form name="frm1" önsubmit="return testvalues();">
<span id="answer1">Question 1:
Yes<input type="radio" name="question1" id="Radio1Yes" value="yes" />
No<input type="radio" name="question1" id="Radio1No" value="no" /></span><br />
<span id="answer2">Question 2:
Yes <input type="radio" name="question2" id="Radio2Yes" value="yes" />
No <input type="radio" name="question2" id="Radio2No" value="no" /></span><br />
<span id="answer3">Question 3:
Yes <input type="radio" name="question3" id="Radio3Yes" value="yes" />
No <input type="radio" name="question3" id="Radio3No" value="no" /></span><br />
<span id="answer4">Question 4:
Yes <input type="radio" name="question4" id="Radio4Yes" value="yes" />
No <input type="radio" name="question4" id="Radio4No" value="no" /></span><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
这适用于IE和FF.
This works for IE and FF.
<html>
<body>
<script type="text/javascript">
function alertme(ctrl)
{
// get all elements in the group
var elements = document.getElementsByName(ctrl.name);
var i;
for (i=0;i<elements.length;i++)
{
// clear the background of the SPAN
elements[i].parentNode.style.background="none";
}
return true;
}
</script>
<form name="frm1">
<span id="q1male" style="background:red;"><input type="radio" name="sex" value="male" onchange="return alertme(this);" /></span> Male<br />
<span id="q1female" style="background:red;"><input type="radio" name="sex" value="female" onchange="return alertme(this);" /></span> Female
</form>
</body>
</html>
这篇关于单选按钮验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
