我在一个HTML表单中有两个单选按钮。当其中一个字段为空时,会出现对话框。如何检查单选按钮是否已选择?
我在一个HTML表单中有两个单选按钮。当其中一个字段为空时,会出现对话框。如何检查单选按钮是否已选择?
假设你有这样的HTML代码
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" />
对于客户端验证,这里是一些JavaScript代码来检查哪一个被选中:
if(document.getElementById('gender_Male').checked) {
//Male radio button is checked
}else if(document.getElementById('gender_Female').checked) {
//Female radio button is checked
}
根据您的标记语言的确切特点,上述代码可以更高效地实现,但这应该足以让您入门。
如果您只是想查看页面上是否任意单选按钮任何地方被选中,PrototypeJS 可以非常容易地实现。
下面是一个函数,如果页面上至少有一个单选按钮被选中,则返回true。同样,根据您的具体HTML情况,可能需要进行调整。
function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
对于服务器端验证 (记住,你不能完全依赖JavaScript进行验证!),这将取决于您选择的编程语言,但您需要检查请求字符串中的gender
值。
使用jQuery,代码可能如下:
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
让我把它分解成几部分,以便更清楚地介绍。 jQuery从左到右处理事物。
input[name=gender]:checked
input
用于限定输入标签。[name=gender]
用于限定前一组中名为 gender 的标签。:checked
用于限定前一组中已选中的复选框/单选按钮。如果要完全避免这种情况,可以在HTML代码中将其中一个单选按钮标记为已选(checked="checked"
),这将确保始终选择一个单选按钮。
一个纯 JavaScript 的方法
var radios = document.getElementsByTagName('input');
var value;
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;
}
}
document.getElementsByClassName()
或选择器 API :) - Russ Cam你可以使用这个简单的脚本。 你可能有相同名称但不同值的多个单选按钮。
var checked_gender = document.querySelector('input[name = "gender"]:checked');
if(checked_gender != null){ //Test if something was checked
alert(checked_gender.value); //Alert the value of the checked.
} else {
alert('Nothing checked'); //Alert, nothing was checked.
}
document.forms[0].elements['nameOfRadioList'].value
。 - BharataquerySelector
而不是 querySelectorAll
。我一直得到未定义的结果....... :-) - Adrian我只是想用一些CSS选择器语法来改进Russ Cam的解决方案,并结合原生JavaScript。
var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;
这里真的没有必要使用jQuery,querySelectorAll现在已经被广泛支持。
编辑:修复了css选择器中的错误,我已经包括了引号,尽管你可以省略它们,在某些情况下你不能这样做,最好还是留下它们。
a[href^="http://"]
),它们是必需的,并且保持一致性更易维护。此外,这使得属性声明与相应的 HTML 匹配。 - ManngoHTML 代码
<input type="radio" name="offline_payment_method" value="Cheque" >
<input type="radio" name="offline_payment_method" value="Wire Transfer" >
JavaScript 代码:
var off_payment_method = document.getElementsByName('offline_payment_method');
var ischecked_method = false;
for ( var i = 0; i < off_payment_method.length; i++) {
if(off_payment_method[i].checked) {
ischecked_method = true;
break;
}
}
if(!ischecked_method) { //payment method button is not checked
alert("Please choose Offline Payment Method");
}
这个页面上的脚本帮助我编写了下面的脚本,我认为它更加完整和通用。基本上,它将验证表单中任意数量的单选按钮,也就是说,它将确保在表单中的每个不同单选组中都选择了一个单选选项。例如,在下面的测试表单中:
<form id="FormID">
Yes <input type="radio" name="test1" value="Yes">
No <input type="radio" name="test1" value="No">
<br><br>
Yes <input type="radio" name="test2" value="Yes">
No <input type="radio" name="test2" value="No">
<input type="submit" onclick="return RadioValidator();">
RadioValidator脚本将确保在提交之前已经回答了“test1”和“test2”的问题。您可以在表单中拥有多个单选框组,并且它将忽略任何其他表单元素。所有缺少的单选框答案都将显示在一个警报弹出窗口中。希望这能帮助人们。欢迎进行任何错误修复或有用的修改 :)
<SCRIPT LANGUAGE="JAVASCRIPT">
function RadioValidator()
{
var ShowAlert = '';
var AllFormElements = window.document.getElementById("FormID").elements;
for (i = 0; i < AllFormElements.length; i++)
{
if (AllFormElements[i].type == 'radio')
{
var ThisRadio = AllFormElements[i].name;
var ThisChecked = 'No';
var AllRadioOptions = document.getElementsByName(ThisRadio);
for (x = 0; x < AllRadioOptions.length; x++)
{
if (AllRadioOptions[x].checked && ThisChecked == 'No')
{
ThisChecked = 'Yes';
break;
}
}
var AlreadySearched = ShowAlert.indexOf(ThisRadio);
if (ThisChecked == 'No' && AlreadySearched == -1)
{
ShowAlert = ShowAlert + ThisRadio + ' radio button must be answered\n';
}
}
}
if (ShowAlert != '')
{
alert(ShowAlert);
return false;
}
else
{
return true;
}
}
</SCRIPT>
HTML:
<input type="radio" name="radiosname" value="1" />
<input type="radio" name="radiosname" value="2" id="radiowithval2"/>
<input type="radio" name="radiosname" value="3" />
js:
// Check if second radio is selected (by id)
if ($('radiowithval2').get("checked"))
// Check if third radio is selected (by name and value)
if ($$('input[name=radiosname][value=3]:checked').length == 1)
// Check if something in radio group is choosen
if ($$('input[name=radiosname]:checked').length > 0)
// Set second button selected (by id)
$("radiowithval2").set("checked", true)
$('input[name="myRadio"]').change(function(e) { // Select the radio input group
// This returns the value of the checked radio button
// which triggered the event.
console.log( $(this).val() );
// but this will return the first radio button's value,
// regardless of checked state of the radio group.
console.log( $('input[name="myRadio"]').val() );
});
$('input[name="myRadio"]').val()
并不能返回被选中的单选按钮的值,它会返回第一个单选按钮的值。