我在HTML表单中有两个单选按钮。当其中一个字段为空时,将出现一个对话框。如何查看单选按钮是否被选中?


当前回答

如果你想使用普通的JavaScript,不想在每个单选按钮上添加id而使你的标记变得混乱,并且只关心现代浏览器,那么下面的函数式方法对我来说比for循环更有品位:

<form id="myForm">
<label>Who will be left?
  <label><input type="radio" name="output" value="knight" />Kurgan</label>
  <label><input type="radio" name="output" value="highlander" checked />Connor</label>
</label>
</form>

<script>
function getSelectedRadioValue (formElement, radioName) {
    return ([].slice.call(formElement[radioName]).filter(function (radio) {
        return radio.checked;
    }).pop() || {}).value;
}

var formEl = document.getElementById('myForm');
alert(
   getSelectedRadioValue(formEl, 'output') // 'highlander'
)
</script>

如果两者都没有选中,它将返回undefined(尽管您可以更改上面的行以返回其他内容,例如,要得到false返回,您可以将上面的相关行更改为:}).pop() || {value:false}).value;)

还有一种前瞻性的polyfill方法,因为RadioNodeList接口应该可以很容易地在表单子无线电元素列表上使用value属性(在上面的代码中作为formElement[radioName]找到),但这也有它自己的问题:如何填充RadioNodeList?

其他回答

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

   <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'给出了答案。您可以在表单中拥有任意多的无线电组,并且它将忽略任何其他表单元素。所有丢失的无线电答案将显示在一个单一的警告弹出。在这里,我希望它能帮助到人们。欢迎任何bug修复或有用的修改:)

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

只是对马克·比克做了一点点修改;

HTML代码

<form name="frm1" action="" method="post">
  <input type="radio" name="gender" id="gender_Male" value="Male" />
  <input type="radio" name="gender" id="gender_Female" value="Female" / >
  <input type="button" value="test"  onclick="check1();"/>
</form>

和Javascript代码来检查单选按钮是否被选中

<script type="text/javascript">
    function check1() {            
        var radio_check_val = "";
        for (i = 0; i < document.getElementsByName('gender').length; i++) {
            if (document.getElementsByName('gender')[i].checked) {
                alert("this radio button was clicked: " + document.getElementsByName('gender')[i].value);
                radio_check_val = document.getElementsByName('gender')[i].value;        
            }        
        }
        if (radio_check_val === "")
        {
            alert("please select radio button");
        }        
    }
</script>

让我们假设你有这样的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进行验证!),这取决于您所选择的语言,但是您可以检查请求字符串的性别值。

使用JQuery,另一种检查单选按钮当前状态的方法是获取属性“checked”。

例如:

<input type="radio" name="gender_male" value="Male" />
<input type="radio" name="gender_female" value="Female" />

在这种情况下,你可以检查按钮使用:

if ($("#gender_male").attr("checked") == true) {
...
}

只是试图改进Russ Cam的解决方案与一些CSS选择器糖扔在香草JavaScript。

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

这里不需要jQuery, querySelectorAll现在已经得到了足够广泛的支持。

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