如何获得所选单选按钮的值?

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

2020-04-23 21:54:42

其他回答

编辑: 正如Chips_100所说，你应该使用:

var sizes = document.theForm[field];

直接不使用测试变量。

旧的回答:

你不应该这样评估吗?

var sizes = eval(test);

我不知道这是如何工作的，但对我来说，你只是复制了一个字符串。

2012-03-08 13:41:27

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

2017-11-24 13:16:12

这里有一个很好的方法来获得选中的单选按钮的值与纯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);

2020-04-23 21:54:42

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

function findSelection(name) {
    return document.querySelector(`[name="${name}"]:checked`).value
}

2022-10-19 19:42:41

如果有人像我一样在这里寻找答案，你可以从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

2016-11-14 14:37:13

如何获得所选单选按钮的值?

推荐文章

最新文章

标签