我的JS程序有一些奇怪的问题。我有这个工作正常,但由于某种原因,它不再工作。我只是想找到单选按钮的值(其中一个被选中)并将其返回给一个变量。由于某种原因,它总是返回undefined。

这是我的代码:

function findSelection(field) {
    var test = 'document.theForm.' + field;
    var sizes = test;

    alert(sizes);
        for (i=0; i < sizes.length; i++) {
            if (sizes[i].checked==true) {
            alert(sizes[i].value + ' you got a value');     
            return sizes[i].value;
        }
    }
}

submitForm:

function submitForm() {

    var genderS =  findSelection("genderS");
    alert(genderS);
}

HTML:

<form action="#n" name="theForm">

    <label for="gender">Gender: </label>
    <input type="radio" name="genderS" value="1" checked> Male
    <input type="radio" name="genderS" value="0" > Female<br><br>
    <a href="javascript: submitForm()">Search</A>
</form>

当前回答

如果你可以为你的表单元素()分配一个Id,这种方式可以被认为是一种安全的替代方式(特别是当无线电组元素名称在文档中不是唯一的):

function findSelection(field) {
    var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input");
    alert(formInputElements);
        for (i=0; i < formInputElements.length; i++) {
        if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) {
            alert(formInputElements[i].value + ' you got a value');     
            return formInputElements[i].value;
        }
    }
}

HTML:

<form action="#n" name="theForm" id="yourFormId">

其他回答

这是纯JavaScript,基于@Fontas的回答,但如果没有选中单选按钮,则使用安全代码返回空字符串(并避免TypeError):

var genderSRadio = document.querySelector("input[name=genderS]:checked");
var genderSValue = genderSRadio ? genderSRadio.value : "";

代码是这样分解的:

第1行:获得一个对控件的引用,其中(a)是<input>类型,(b)有一个名称属性为性别,(c)被检查。 第2行:如果有这样一个控件,返回它的值。如果没有,则返回空字符串。如果第1行找到控件,则genderSRadio变量为真值,如果没有找到,则为空/假值。

对于JQuery,使用@ jbaby的答案,并注意,如果没有选中单选按钮,它将返回未定义。

你可以这样做:

var收音机= document.getElementsByName('性别'); 对于(var I = 0,长度= radio .length;I < length;我+ +){ If(收音机[i].checked) { //做任何你想做的检查收音机 警报(无线电[我]。value); //逻辑上只能检查一个无线电,不要检查其他的 打破; } } <label for="gender">性别:</label> <input type="radio" name=" lads " value="1" checked="checked">Male</input> . <input type="radio" name="gender " value="0">Female</input> .

斯菲德尔

编辑:感谢HATCHA和jsetung的编辑建议。

从jQuery 1.8开始,查询的正确语法是

$('input[name="genderS"]:checked').val();

不是$('输入[@ name = "性别"]:检查”).val ();它在jQuery 1.7中工作(使用@)。

这里是一个没有使用Checked=" Checked "属性的无线电示例

function test() {
var radios = document.getElementsByName("radiotest");
var found = 1;
for (var i = 0; i < radios.length; i++) {       
    if (radios[i].checked) {
        alert(radios[i].value);
        found = 0;
        break;
    }
}
   if(found == 1)
   {
     alert("Please Select Radio");
   }    
}

演示:http://jsfiddle.net/ipsjolly/hgdWp/2/[点击查找,不选择任何电台]

来源(来自我的博客):http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

假设你需要在一个表单中放置不同的单选按钮行,每一行都有独立的属性名('option1','option2'等),但类名相同。也许您需要在多行中使用它们,在这些行中,它们将根据与某个问题相关的1到5的范围提交一个值。你可以这样写你的javascript:

<script type="text/javascript">

    var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name     
    var radios="";

    var i;
    for(i=0;i<ratings.length;i++){
        ratings[i].onclick=function(){
            var result = 0;
            radios = document.querySelectorAll("input[class=ratings]:checked");
            for(j=0;j<radios.length;j++){
                result =  result + + radios[j].value;
            }
            console.log(result);
            document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating
        }
    }
</script>

我还会将最终输出插入到一个隐藏的表单元素中,与表单一起提交。