Javascript单选按钮组验证
Posted
技术标签:
【中文标题】Javascript单选按钮组验证【英文标题】：Javascript Radiobutton Group Validation 【发布时间】：2011-06-26 00:18:56 【问题描述】：我希望您帮助开发一个 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>
感谢您的帮助.....
【问题讨论】：
你试过什么？什么没用？我们没有为您编写代码的习惯，但很乐意帮助您解决任何问题。 您的两个input[type=radio] 元素具有相同的id。 id 值（不同于 name 值）必须是唯一的：w3.org/TR/html5/dom.html#concept-id
感谢您的回答，但我不想使用 jQuery 并使用 Simple JavaScript 代替。
【参考方案1】：
首先，正如我的同事所说，两个单选按钮不能有相同的 id（“IDType”）。
这是一个仅使用 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>
【讨论】：
【参考方案2】：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：为了让它工作，你应该考虑为 dom 元素使用唯一的 id。两个单选按钮不能有相同的 id（“IDType”）。
【讨论】：
感谢您的回答，但我不想使用 jQuery 并使用 Simple JavaScript 代替。以上是关于Javascript单选按钮组验证的主要内容，如果未能解决你的问题，请参考以下文章