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

当前回答

这里有一个很好的方法来获得选中的单选按钮的值与纯JavaScript:

const form = document.forms.demo;
const checked = form.querySelector('input[name=characters]:checked');

// log out the value from the :checked radio
console.log(checked.value);

来源:https://ultimatecourses.com/blog/get-value-checked-radio-buttons

使用这个HTML:

<form name="demo">
  <label>
    Mario
    <input type="radio" value="mario" name="characters" checked>
  </label>
  <label>
    Luigi
    <input type="radio" value="luigi" name="characters">
  </label>
  <label>
    Toad
    <input type="radio" value="toad" name="characters">
  </label>
</form>

你也可以使用Array Find the checked属性来查找被选中的项:

Array.from(form.elements.characters).find(radio => radio.checked);

其他回答

这是纯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的答案,并注意,如果没有选中单选按钮,它将返回未定义。

首先,大声喊出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

把Ed Gibbs的答案代入一个一般函数:

function findSelection(rad_name) {
    const rad_val = document.querySelector('input[name=' + rad_name + ']:checked');
    return (rad_val ? rad_val.value : "");
}

然后你可以执行findSelection("性别");

    var value = $('input:radio[name="radiogroupname"]:checked').val();

如果你可以为你的表单元素()分配一个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">