我的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>
这里是一个没有使用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");
}
}
演示:http://jsfiddle.net/ipsjolly/hgdWp/2/[点击查找，不选择任何电台]
来源(来自我的博客):http://bloggerplugnplay.blogspot.in/2013/01/validateget-checked-radio-value-in.html
这是纯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的答案，并注意，如果没有选中单选按钮，它将返回未定义。
假设你需要在一个表单中放置不同的单选按钮行，每一行都有独立的属性名('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>
你也可以使用Array Find the checked属性来查找被选中的项:
Array.from(form.elements.characters).find(radio => radio.checked);
首先，大声喊出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
