如何检查是否使用JavaScript选择了一个单选按钮？

Question

我在HTML表单中有两个单选按钮.当其中一个字段为空时,会出现一个对话框.如何检查是否选择了单选按钮？

Answer 1

我们假装你有像这样的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请求字符串的值.

Answer 2

使用jQuery,它就像是

if ($('input[name=gender]:checked').length > 0) {
    // do something here
}

让我把它分解成碎片,以便更清楚地覆盖它.jQuery从左到右处理事情.

input[name=gender]:checked

1. input 将其限制为输入标签.
2. [name=gender] 将其限制为上一组中名称为gender的标记.
3. :checked 将其限制为在上一组中选择的复选框/单选按钮.

如果您想完全避免这种情况,请checked="checked"在HTML代码中将其中一个单选按钮标记为checked(),这样可以保证始终选中一个单选按钮.

Answer 3

一种香草的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;       
    }
}

Answer 4

只是尝试用一些带有vanilla JavaScript的CSS选择器糖来改进Russ Cam的解决方案.

var radios = document.querySelectorAll('input[type="radio"]:checked');
var value = radios.length>0? radios[0].value: null;

这里没有真正需要jQuery,querySelectorAll现在已经得到了广泛的支持.

编辑:修复了css选择器的一个错误,我已经包含了引号,虽然你可以省略它们,但在某些情况下你不能这样做,最好留下它们.

Answer 5

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");
}

Answer 6

这个页面中的脚本帮助我提出了下面的脚本,我认为这个脚本更加完整和通用.基本上它将验证表单中任意数量的单选按钮,这意味着它将确保为表单中的每个不同的无线电组选择了一个无线电选项.例如,在下面的测试表中:

   <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>

Answer 7

您可以使用此简单脚本。您可能有多个具有相同名称和不同值的单选按钮。

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.
}

Answer 8

使用 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)

Answer 9

获取无线电输入值时请注意jQuery的这种行为:

$('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(),不会像您预期的那样返回无线电输入的已检查值 - 它会返回第一个单选按钮的值.

Answer 10

有一种非常复杂的方法可以验证是否使用 ECMA6 和方法检查了任何单选按钮.some()。

网址：

<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会true如果某些单选按钮的检查和false如果两者都没有被选中。

Answer 11

我使用扩展运算符和一些来检查数组中的至少一个元素是否通过测试。

我分担为谁关心。

var checked = [...document.getElementsByName("gender")].some(c=>c.checked);
console.log(checked);

<input type="radio" name="gender" checked value="Male" /> Male
<input type="radio" name="gender"  value="Female" / > Female