我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?
当前回答
有一种非常复杂的方法可以用ECMA6和.some()方法验证是否选中了任意单选按钮。
Html:
<input type="radio" name="status" id="marriedId" value="Married" />
<input type="radio" name="status" id="divorcedId" value="Divorced" />
和javascript:
let htmlNodes = document.getElementsByName('status');
let radioButtonsArray = Array.from(htmlNodes);
let isAnyRadioButtonChecked = radioButtonsArray.some(element => element.checked);
如果选中了一些单选按钮,isAnyRadioButtonChecked将为真,如果两个单选按钮都没有选中,则为假。
其他回答
我使用展开运算符和some来检查数组中至少有一个元素通过了测试。
我为谁分担关心。
var checked =[..文档.getElementsByName(“性别”).有些(c=>c.checked); 控制台日志(检查); <输入类型=“收音机”,性别“检查值=“男性”/> Male <输入类型=“无线电”
只是对马克·比克做了一点点修改;
HTML代码
<form name="frm1" action="" method="post">
<input type="radio" name="gender" id="gender_Male" value="Male" />
<input type="radio" name="gender" id="gender_Female" value="Female" / >
<input type="button" value="test" onclick="check1();"/>
</form>
和Javascript代码来检查单选按钮是否被选中
<script type="text/javascript">
function check1() {
var radio_check_val = "";
for (i = 0; i < document.getElementsByName('gender').length; i++) {
if (document.getElementsByName('gender')[i].checked) {
alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
radio_check_val = document.getElementsByName('gender')[i].value;
}
}
if (radio_check_val === "")
{
alert("please select radio button");
}
}
</script>
这对于具有相同名称的单选按钮是有效的,不需要JQuery。
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked })[0];
如果我们正在讨论复选框,并且我们想要一个列表,其中选中的复选框共享一个名称:
var x = Array.prototype.filter.call(document.getElementsByName('checkThing'), function(x) { return x.checked });
mootools (http://mootools.net/docs/core/Element/Element)
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)
对于jQuery,它就像这样
if ($('input[name=gender]:checked').length > 0) {
// do something here
}
让我把它分解成几部分,以便更清楚地解释。 jQuery从左到右处理事物。
input[name=gender]:checked
Input将其限制为输入标记。 [name=gender]将其限制为前一组中具有名称性别的标签。 :checked将其限制为前一组中选中的复选框/单选按钮。
如果您希望完全避免这种情况,可以在HTML代码中将其中一个单选按钮标记为已选中(checked="checked"),这将确保始终选中一个单选按钮。