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

Question

我找到了一些可以实现此功能的脚本，但它们只适用于一个单选按钮名称，而我有5个不同的单选按钮集。我该如何检查它是否被选中？我已经尝试在表单提交时进行检查。

if(document.getElementById('radiogroup1').value=="") {
        alert("Please select option one");
        document.getElementById('radiogroup1').focus();
        return false;
    }

无法正常工作。

- JohnA

---

可能是重复的问题如何使用JavaScript检查单选按钮是否已选择？ - Siraj Alam

Answer 1

如果您决心使用标准的JavaScript，则需要注意以下内容： 函数定义

var isSelected = function() {
    var radioObj = document.formName.radioGroupName;

    for(var i=0; i<radioObj.length; i++) {
        if( radioObj[i].checked ) {
            return true;
        }
    }

    return false;
};

用法

if( !isSelected() ) {
    alert('Please select an option from group 1 .');
}   

我建议使用jQuery。它有很多选择器选项，当它们一起使用时，可以将大部分代码简化为一行。 备选方案

if( $('input[type=radio][name=radioGroupName]:selected').length == 0 ) {
    alert('Please select an option from group 1 .');
}

- Oliver

---

这个答案已经有些过时了（以网络年计算），所以要注意现在不再需要使用jQuery来选择元素，特别是因为IE < 8已经淘汰。 - BryanH

Answer 2

var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
    if (radio.checked) {
        checked = true;
        break;
    }
}

if (!checked) {
    alert("Please select option one");
    radios.focus();
    return false;
}

return true;

- Kevin

---

按规范，页面上任何两个元素的id都不应相同。 - Martin

document.getElementsById() is wrong. [s after Element]. It should be document.getElementById() OR document.getElementsByClassName[]() - Siraj Alam

Answer 3

这里有一个不错的教程 -> http://www.somacon.com/p143.php

---

// return the value of the radio button that is checked
// return an empty string if none are checked, or
// there are no radio buttons
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 "";
}

// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
    if(!radioObj) return;
    var radioLength = radioObj.length;
    if(radioLength == undefined) {
        radioObj.checked = (radioObj.value == newValue.toString());
        return;
    }
    for(var i = 0; i < radioLength; i++) {
        radioObj[i].checked = false;
        if(radioObj[i].value == newValue.toString()) radioObj[i].checked = true;
    }
}

- SpYk3HH

Answer 4

一个非常简单的函数是：

<script type="text/javascript">

function checkRadios(form) {
   var btns = form.r0;
   for (var i=0; el=btns[i]; i++) {
     if (el.checked) return true;
   }
   alert('Please select a radio button');
   return false;
}
</script>

<form id="f0" onsubmit="return checkRadios(this);">
  one<input type="radio" name="r0"><br>
  two<input type="radio" name="r0"><br>
  three<input type="radio" name="r0"><br>
  <input type="submit">
</form>

然而，您应始终默认选择一个单选按钮（即使用select属性），某些用户代理可能会自动选择第一个按钮。然后您只需要检查默认值（通常是第一个）是否被选中。

- RobG

Answer 5

为什么不只使用一行代码呢？

我写了这段代码，如果至少一个单选框被选中，它将提交表单：

(function(el){for(var i=el.length;i--;) if (el[i].checked) return el[i].form.submit()||1})(document.form_name.radio_name)||alert('please select item')

否则它将会触发一个警报。或者您也可以修改它以便与表单的 onsubmit 一起使用：

return (function(el){for(var i=el.length;i--;) if (el[i].checked) return 1})(document.form_name.radio_name)||alert('please select item')

只需相应地替换form_name和radio_name即可。

查看其工作原理：http://jsfiddle.net/QXeDv/5/

- Anonymous

---

我知道这是一个老问题，但把你的所有代码都写在一行上并不能使你的代码成为“单行代码”;请避免使用这种做法。 - muhr

你其实是错的。它们是可以在一行内工作的代码。请查看fiddle以了解它们的工作原理。如果你无法理解它的功能...那最好不要发表评论。 - Anonymous

Answer 6

你对 jQuery 有了解吗？如果有：

$(document).ready(function(){
    if($('input[type=radio]:checked').length == 0)
    {
        alert("Please select option one");         
        document.getElementById('radiogroup1').focus();         
        return false;     
    }
}

- Zen Pak

---

在jQuery中，$(document).ready(function(){ 可以更简单地写成 $(function(){。它们的作用是相同的，只不过后者是较新的写法，可以通过更多的跨浏览器过滤来检查文档是否准备就绪，并且更符合jQuery的风格。 - SpYk3HH

同时，在jQuery中使用if语句也变得更加简单，只需使用一个简单的jQuery样式调用即可：if ($('input.classnameIsEasier').is(':checked')) { /* do work */ }; - SpYk3HH

还有一件事，如果你要使用jQuery，并且需要对单选按钮、复选框等进行表单验证，可以选择这个插件。它非常适合通过Ajax提供更多功能和更好的验证时机来增强表单的验证。 - SpYk3HH