javascript 如何检查是否选择了单选按钮之一?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10274282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 09:16:34  来源:igfitidea点击:

How to check if one of radio buttons was selected?

javascripthtmlformswebformsradio-button

提问by HelpNeeder

I have JavaScript which checks for text fields and check boxes fine but when comes to radio buttons it fails to distinguish if one of the options was selected.

我有 JavaScript 可以很好地检查文本字段和复选框,但是当涉及到单选按钮时,它无法区分是否选择了其中一个选项。

How to do this correctly?

如何正确地做到这一点?

This is what I have:

这就是我所拥有的:

validateBugForm = function()
{
    var name = document.forms["bug_form"]["Name"].value;
    var email = document.forms["bug_form"]["Email"].value;
    var tos = document.forms["bug_form"]["Accept"].checked;
    var project = document.forms["bug_form"]["project"].value;

    if (name == "")
    {
        alert("You must provide your name or nick name!");
        return false;
    }

    if (project == "")
    {
        alert("You must choose a project.");
        return false;
    }

    if (email.indexOf ('@', 0) == -1 || email.indexOf ('.', 0) == -1)
    {
        alert("You must provide your email address!");
        return false;
    }

    if (!tos)
    {
        alert("You must agree to our Terms of Services.");
        return false;
    }
}

In my form I have:

在我的表格中,我有:

<tr>
    <td width="30%">Choose a project in which you encountered a problem. 
    <big><font color="red">*</font></big></td></td>
    <td width="10px" class="table_td_space"></td>
    <td width="70%">
        <input type="radio" name="project" value="1" id="1">1<br>
        <input type="radio" name="project" value="2" id="2">2<br>
        <input type="radio" name="project" value="3" id="3">3<br>
        <input type="radio" name="project" value="4" id="4">4<br>
    </td>
</tr>

回答by msigman

You need to loop through all of the radio button options to see if one was selected:

您需要遍历所有单选按钮选项以查看是否选择了其中一个:

var projectObj = document.form1.project
var len = projectObj.length
var chosen = null;

for (i = 0; i <len; i++) {
    if (projectObj[i].checked) {
       chosen = projectObj[i].value
    }
}

if (chosen == null) {
    alert("No Radio Button Chosen")
}

http://homepage.ntlworld.com/kayseycarvey/jss3p11.html

http://homepage.ntlworld.com/kayseycarvey/jss3p11.html

回答by Nancy Hastings-Trew

Just a note, I spent an hour scratching my head over this one because this works fine unless you are trying to validate a form with more than this radio element. Since each radio button is a separate form element and you are trying to loop through all the elements in the form (eg., everything with "required_" in the name), this might mess up the rest of the validation or cause it to always come up "false" since you end up checking each radio button as a separate element as you loop through the form. The way around this I found is to use a hidden form field to hold the value of the selected radio button by putting an onClick event on each radio button to transfer it's value to the hidden field when clicked - and just check that there is a value in that hidden field. And don't flag the radio button as an element to be checked.

请注意,我花了一个小时来思考这个问题,因为这很好用,除非您尝试验证包含多个单选元素的表单。由于每个单选按钮都是一个单独的表单元素,并且您正在尝试遍历表单中的所有元素(例如,名称中带有“required_”的所有元素),这可能会扰乱其余的验证或导致它总是出现“false”,因为您最终会在循环浏览表单时将每个单选按钮作为单独的元素进行检查。我发现解决这个问题的方法是使用隐藏的表单字段来保存所选单选按钮的值,方法是在每个单选按钮上放置一个 onClick 事件,以便在单击时将其值传输到隐藏字段 - 并检查是否有值在那个隐藏的领域。不要

回答by md imran

You need to loop through all of the radio button options to see if one was selected but when you holding the "projectObj" you have to call "value" method...

您需要遍历所有单选按钮选项以查看是否选择了一个选项,但是当您持有“projectObj”时,您必须调用“value”方法...

var projectObj = document.form1.project.value;
var len = projectObj.length;
var chosen = null;

for (i = 0; i <len; i++) {
    if (projectObj[i].checked) {
       chosen = projectObj[i].value;
    }
}

if (chosen == null) {enter code here
    alert("No Radio Button Chosen");
} 

then it will take value otherswise it just return radio object list

那么它将取值,否则它只返回无线电对象列表