ECMAScript 6版本

Question

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

Answer 1

JavaScript的：

var radios = document.getElementsByName('genderS');

for (var i = 0, length = radios.length; i < length; i++)
{
 if (radios[i].checked)
 {
  // do whatever you want with the checked radio
  alert(radios[i].value);

  // only one radio can be logically checked, don't check the rest
  break;
 }
}

http://jsfiddle.net/Xxxd3/610/

编辑：感谢HATCHA和jpsetung提供您的编辑建议。

Answer 2

这适用于任何资源管理器。

document.querySelector('input[name="genderS"]:checked').value;

获取任何输入类型的值是最纯粹的方法。你也不需要包含jQuery路径。

Answer 3

document.forms.your-form-name.elements.radio-button-name.value

Answer 4

最简单的解决方案：

 document.querySelector('input[name=genderS]:checked').value

Answer 5

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

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

不再$('input[@name="genderS"]:checked').val();，这在jQuery 1.7中工作（使用 @ ）。

Answer 6

ECMAScript 6版本

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value;

Answer 7

试试这个

function findSelection(field) {
    var test = document.getElementsByName(field);
    var sizes = test.length;
    alert(sizes);
    for (i=0; i < sizes; i++) {
            if (test[i].checked==true) {
            alert(test[i].value + ' you got a value');     
            return test[i].value;
        }
    }
}


function submitForm() {

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

小提琴here。

Answer 8

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

var sizes = document.theForm[field];

直接不使用测试变量。

旧答案：

你不应该eval这样吗？

var sizes = eval(test);

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

Answer 9

如果有人正在寻找答案并像我这样登陆，从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

Answer 10

这是纯JavaScript，基于@Fontas的答案，但如果没有选定的单选按钮，则使用安全代码返回空字符串（并避免使用TypeError）：

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

代码分解如下：

第1行：获取对控件的引用，其中（a）是<input>类型，（b）具有name属性genderS，并且（c）被选中。
第2行：如果有这样的控件，则返回其值。如果没有，则返回一个空字符串。如果第1行找到控件，则genderSRadio变量为真，如果不存在，则为null / falsey。

对于JQuery，请使用@ jbabey的答案，并注意如果没有选定的单选按钮，它将返回undefined。

Answer 11

这是一种使用普通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的checked属性来查找选中的项目：

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

Answer 12

 document.querySelector('input[name=genderS]:checked').value

Answer 13

以下是无线电的示例，其中未使用 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");
   }    
}

DEMO ：http://jsfiddle.net/ipsjolly/hgdWp/2/ [点击查找而不选择任何广播]

来源：http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html

Answer 14

首先，向 ashraf aaref 致敬，我想稍微扩展一下他的回答。

正如 MDN 网络文档所建议的，使用 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 }

这就是为什么您必须先选择表单，然后调用 elements 方法。除了所有 input 节点之外，RadioNodeList 还包括一个属性 value，它可以实现这种简单的操作。

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

Answer 15

使用纯javascript，您可以处理对调度事件的对象的引用。

function (event) {
    console.log(event.target.value);
}

Answer 16

假设您需要在表单中放置不同行的单选按钮，每个单独的属性名称（'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>

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

Answer 17

如果您可以为表单元素（）分配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">

Answer 18

我喜欢使用方括号从输入中获取价值，它比使用点更清晰。

document.forms['form_name']['input_name'].value;

Answer 19

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3">
 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4">

等然后只使用

  $("#rdbExamples:checked").val()

或者

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

Answer 20

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

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

20 个答案:

ECMAScript 6版本