小开

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

var sizes = document.theForm[field];

直接不使用测试变量。

旧的回答:

你不应该这样eval吗?

var sizes = eval(test);

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

小开

最佳答案

你可以这样做:

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;
}
}

<label for="gender">Gender: </label>
<input type="radio" name="genderS" value="1" checked="checked">Male</input>
<input type="radio" name="genderS" value="0">Female</input>

jsfiddle

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

小开

试试这个

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;
}

小提琴在这里。

小开

下面是一个没有使用检查=“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");
}
}

__abc0: __abc1 [__abc2]

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

小开

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

小开

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

小开

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

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

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

小开

这适用于任何浏览器。

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

这是获取任何输入类型值的简单方法。你还做不需要包含jQuery路径

小开

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

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

代码是这样分解的:

第1行:获取一个对控件的引用，该控件(a)是<input>类型，(b)具有genderS的name属性，并且(c)被检查。
第2行:如果有这样一个控件，返回它的值。如果没有，则返回空字符串。如果第1行找到控件，genderSRadio变量为真值，如果没有找到，则为空/假值。

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

小开

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

小开

ECMAScript 6版本

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

小开

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

小开

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

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

小开

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

你也可以使用数组中找到 checked属性来查找选中的项:

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

小开

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

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

小开

首先，喊出阿什拉夫aaref，我想扩展一下他的答案。

正如MDN Web Docs所建议的，使用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

小开

我更喜欢使用formdata对象，因为它表示如果表单被提交，应该发送的值。

注意，它显示了表单值的快照。如果更改值，则需要重新创建FormData对象。如果你想查看收音机的状态变化，你需要订阅变化事件更改事件演示

演示:

let formData = new FormData(document.querySelector("form"));
console.log(`The value is: ${formData.get("choice")}`);

<form>
<p>Pizza crust:</p>
<p>
<input type="radio" name="choice" value="regular" >
<label for="choice1id">Regular crust</label>
</p>
<p>
<input type="radio" name="choice" value="deep" checked >
<label for="choice2id">Deep dish</label>
</p>
</form>

小开

将埃德•吉布斯'的答案放入一个通用函数:

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

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

小开

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

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

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

ECMAScript 6版本