我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?
当前回答
使用JQuery,另一种检查单选按钮当前状态的方法是获取属性“checked”。
例如:
<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />
在这种情况下,你可以检查按钮使用:
if ($("#gender_male").attr("checked") == true) {
...
}
其他回答
http://www.somacon.com/p143.php/
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
基本上,这段代码所做的就是遍历一个包含所有输入元素的nodeList。如果这些输入元素中的一个是radio类型并被检查,那么就执行一些操作并打破循环。
如果循环没有检测到被选中的输入元素,所选的布尔变量将保持false,并且应用条件语句,我们可以在这种情况下执行一些东西。
let inputs = document.querySelectorAll('input') let btn = document.getElementById('btn') let selected = false function check(){ for(const input of inputs){ if(input.type === 'radio' && input.checked){ console.log(`selected: ${input.value}`) selected = true break } } if(!selected) console.log(`no selection`) } btn.addEventListener('click', check) <input type="radio" name="option" value="one"> <label>one</label> <br> <input type="radio" name="option" value="two"> <label>two</label> <br> <br> <button id="btn">check selection</button>
HTML代码
<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");
}
这是我为了解决这个问题而创建的效用函数
//define radio buttons, each with a common 'name' and distinct 'id'.
// eg- <input type="radio" name="storageGroup" id="localStorage">
// <input type="radio" name="storageGroup" id="sessionStorage">
//param-sGroupName: 'name' of the group. eg- "storageGroup"
//return: 'id' of the checked radioButton. eg- "localStorage"
//return: can be 'undefined'- be sure to check for that
function checkedRadioBtn(sGroupName)
{
var group = document.getElementsByName(sGroupName);
for ( var i = 0; i < group.length; i++) {
if (group.item(i).checked) {
return group.item(i).id;
} else if (group[0].type !== 'radio') {
//if you find any in the group not a radio button return null
return null;
}
}
}
下面是扩展后的解决方案,即不继续提交,并在未选中单选按钮时发送警报。当然,这意味着你必须在一开始就不检查它们!
if(document.getElementById('radio1').checked) {
} else if(document.getElementById('radio2').checked) {
} else {
alert ("You must select a button");
return false;
}
只要记住在每个单选按钮的表单中设置id ('radio1','radio2'或任何你叫它的名字),否则脚本将无法工作。