Javascript检查是否选中了单选按钮？

Question

我找到了执行此操作的脚本，但它们仅适用于一个单选按钮名称，我有 5 个不同的单选按钮集。我如何检查它是否现在选择了我尝试提交表单

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

不工作。

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 .');
}

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;

Answer 3

一个很简单的函数是：

<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 属性），一些用户代理可能会自动选择第一个按钮。然后你只需要检查默认（通常是第一个）是否被选中。

Answer 4

为什么不只使用oneliner？

我编写了这段代码，如果选中了至少一个收音机，它将提交表单：

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

Answer 5

这是一个很好的教程 -> 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;
    }
}

Answer 6

你对 jquery 还好吗？如果是这样：

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