Javascript 单选按钮组验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4977084/
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 Radiobutton Group Validation
提问by user614040
I would like your help to develop a javascript function to validate if one of the following radiobutton group (IDType) is selected and which value is checked and view error message in (ValidationError) division in case no radio button selected ??
我希望您帮助开发一个 javascript 函数来验证是否选择了以下单选按钮组 (IDType) 之一以及检查哪个值并查看 (ValidationError) 部门中的错误消息，以防未选择单选按钮？
<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
</td>
Thanks for your help.....
谢谢你的帮助.....
回答by vk_muse
First of all, as said my collegues, you cannot have the same id ("IDType") for both your radio buttons.
首先，正如我的同事所说，您的两个单选按钮不能具有相同的 ID（“IDType”）。
Here is a solution with javascript only, without any jquery.
这是一个仅使用 javascript 的解决方案，没有任何 jquery。
<html>
<head>
<script type="text/javascript">
function Validate() {
var radios = document.getElementsByName('IDType')
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
alert("Selected Value = " + radios[i].value);
return true; // checked
}
};
// not checked, show error
document.getElementById('ValidationError').innerHTML = 'Error!!!';
return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>
回答by gion_13
function validateRadioButtons(){
var radio = $('input:radio[name="IDType"]:checked');
if(radio.length == 0)//no buttons selected
{
$('ValidationError').text("you haven't selected any buttons!");
return;
}
$('ValidationError').text(radio.val()+' is selected');
}
ps: in order for this to work, you should consider using unique id's for dom elements. you cannot have the same id ("IDType") for both your radio buttons.
ps：为了使其工作，您应该考虑对 dom 元素使用唯一的 id。您的两个单选按钮不能具有相同的 ID（“IDType”）。
