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

当前回答

如果有人像我一样在这里寻找答案,你可以从Chrome 34和Firefox 33中执行以下操作:

var form = document.theForm;
var radios = form.elements['genderS'];
alert(radios.value);

或者更简单:

alert(document.theForm.genderS.value);

具有:https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

其他回答

首先,大声喊出ashraf aaref,他的回答我想扩展一点。

正如MDN Web文档建议的那样,使用RadioNodeList是首选的方法:

// Get the form
const form = document.forms[0];

// Get the form's radio buttons
const radios = form.elements['color'];

// You can also easily get the selected value
console.log(radios.value);

// Set the "red" option as the value, i.e. select it
radios.value = 'red';

不过,也可以通过querySelector选择表单,这也很好:

const form = document.querySelector('form[name="somename"]')

但是,直接选择无线电将不起作用,因为它将返回一个简单的NodeList。

document.querySelectorAll('input[name="color"]')
// Returns: NodeList [ input, input ]

在选择表单时,首先返回一个RadioNodeList

document.forms[0].elements['color']
// document.forms[0].color # Shortcut variant
// document.forms[0].elements['complex[naming]'] # Note: shortcuts do not work well with complex field names, thus `elements` for a more programmatic aproach
// Returns: RadioNodeList { 0: input, 1: input, value: "red", length: 2 }

这就是为什么必须首先选择表单,然后调用元素方法。除了所有输入节点之外,RadioNodeList还包括一个属性值,它支持这种简单的操作。

参考:https://developer.mozilla.org/en-US/docs/Web/API/RadioNodeList/value

假设你需要在一个表单中放置不同的单选按钮行,每一行都有独立的属性名('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>

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

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

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

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

我知道这是非常古老的,但现在可以在一行中完成

function findSelection(name) {
    return document.querySelector(`[name="${name}"]:checked`).value
}
    var value = $('input:radio[name="radiogroupname"]:checked').val();