如何用JavaScript检查单选按钮是否被选中？

Question

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

- noob

---

这个链接可能会对你有所帮助 https://dev59.com/LGw15IYBdhLWcg3wYKqo - Ahmed Elbendary

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

- Mark Biek

---

但是我想要检查一个单选按钮是否被选中，而不管选择了什么。 - noob

我不是很明白你在说什么？你是否关心是否选择了任何单选按钮？ - Mark Biek

是的。由于无法提交表单，如果没有填写所有字段，包括单选按钮。 - noob

如果(document.getElementById('gender_Male').checked || document.getElementById('gender_Female').checked)则弹出警示框('我的一些单选按钮已被选中'); - Havenard

我已经修改了我的原型示例，以利用我刚从R. Bemrose那里学到的CSS选择器课程。 - Mark Biek

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 用于限定前一组中已选中的复选框/单选按钮。

如果要完全避免这种情况，可以在HTML代码中将其中一个单选按钮标记为已选（checked="checked"），这将确保始终选择一个单选按钮。

- Powerlord

---

如果未被要求，建议使用库会得到-1分。这样我们可以用“包含库x，使用x.doWhatYouNeed()”来回答所有问题。没有任何刻意挑衅的意思，我真的认为应该用纯JavaScript回答这个问题（最后指出使用库可以更容易）。 - Riccardo Galli

许多人已经在使用jQuery，因此答案以“使用jQuery，它会是这样的”开头，以防他们已经在使用它。 - Powerlord

有人知道是否可以像这样链接选择器吗？input[name=gender][type=radio]或input[name=gender,type=radio]只是为了额外的验证？ - Ty_

@EW-CodeMonkey 你提到的第一种方法应该可以。 - Powerlord

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

- Russ Cam

---

我现在遇到了几乎相同的问题，你的代码非常有帮助。 - MoreThanChaos

这将为您获取最后一个选中的单选按钮的值。如果您有多个单选按钮组，则可能无法获取正确的值。 - styfle

@RussCam 是的，这对于只有2个单选按钮的小页面有效，但我添加了我的评论以使答案完整。获取单选按钮元素的最佳方法是通过“名称”。 - styfle

更好的方法是通过特定类别选择单选按钮元素，然后将不同组的单选按钮元素分组到不同的类别中。否则，这个解决方案只能适用于一个单选按钮元素组，而没有其他输入表单元素。 - Oliver

@Tobsta 随意编辑和更新答案；它是在2009年编写的，当时并不是每个浏览器都支持 document.getElementsByClassName() 或选择器 API :) - Russ Cam

Answer 4

你可以使用这个简单的脚本。 你可能有相同名称但不同值的多个单选按钮。

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

- Neri

---

+1. 这是获取选中单选框元素的最短 Vanilla JS 解决方案，在某些情况下非常有用。我认为你的答案是最好的，因为它可以实现这个功能。如果只需要获取值，我们可以使用 document.forms[0].elements['nameOfRadioList'].value。 - Bharata

我赞同 @Bharata 所说的，这是目前为止最好的答案。简洁、正确、最新。 - Aquarelle

如果你盯着屏幕看了很长时间，你可能会错过它......这个解决方案使用的是 querySelector 而不是 querySelectorAll。我一直得到未定义的结果....... :-) - Adrian

Answer 5

我只是想用一些CSS选择器语法来改进Russ Cam的解决方案，并结合原生JavaScript。

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

这里真的没有必要使用jQuery，querySelectorAll现在已经被广泛支持。

编辑：修复了css选择器中的错误，我已经包括了引号，尽管你可以省略它们，在某些情况下你不能这样做，最好还是留下它们。

- Matt McCabe

---

可能应该是 var radios = document.querySelectorAll('input[type="radio"]:checked'); - Md. Shafiqur Rahman

@ShafiqurRahman，你说得完全正确，我会更新我的答案，我认为你不需要在radio周围加引号。 - Matt McCabe

+1 支持使用原生 JavaScript。我会一直在属性值周围使用引号，因为对于某些其他属性值（例如 a[href^="http://"]），它们是必需的，并且保持一致性更易维护。此外，这使得属性声明与相应的 HTML 匹配。 - Manngo

Answer 6

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

- Amit sharma

---

警告：此代码在页面加载时立即返回弹出警告。 - samthebrand

Answer 7

这个页面上的脚本帮助我编写了下面的脚本，我认为它更加完整和通用。基本上，它将验证表单中任意数量的单选按钮，也就是说，它将确保在表单中的每个不同单选组中都选择了一个单选选项。例如，在下面的测试表单中：

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

- Trelamenos

Answer 8

我使用了展开运算符和some来检查数组中至少有一个元素通过了测试。

我分享给关心此事的人。

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

- Hien Nguyen

---

我喜欢你的回答@Hien Nguyen，这正是我一直在尝试想出的（使用“any()”的想法），但我发现JavaScript只使用“some()”。请问有人可以告诉我“三个点”是什么意思吗？没有它就不起作用。 - Jonno

Answer 9

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

- marbel82

---

// 检查单选框组中是否选择了某项 if ($$('input[name=radiosname]:checked').length > 0) 正是我所需要的。 - Steve Johnson

Answer 10

请注意，使用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()并不能返回被选中的单选按钮的值，它会返回第一个单选按钮的值。

- Bradley Flood