我试图通过使用“document.getElementByName('nameOfradio')”来选择单选按钮,因为所有单选按钮共享相同的名称。但是,什么都没发生。我使用document.getElementById('nameOfradio')尝试了同样的事情并且运行良好。但是,我必须为所有单选按钮提供唯一ID。所以,当我有20个单选按钮时,它会变得难看。结果,我想要的是制作捷径。如何使用“名称”获取所选单选按钮的值?代码;
HTML
<input type="radio" name="nameOfradio" value="onm1" /> 1
<input type="radio" name="nameOfradio" value="onm2" /> 2
<input type='button' onclick='radio3()' value='Submit' />
</form>
Ajax(radio3()的相关部分)
var radioPushed = document.getElementByName('nameOfradio').value;
var queryString = "?radioPushed=" + radioPushed;//to send the value to another file
ajaxRequest.open("GET", "radio_display.php" + queryString, true);
ajaxRequest.send(null);
正如我所说的document.getElementById有效,但它需要太多的工作:(如何通过使用单选按钮的常用功能使其更简单,而不是给它们唯一的ID?一个简短的解释为什么我不能做它将是非常有用(javascript和ajax中的新功能)
答案 0 :(得分:20)
这一行:
document.getElementByName('nameOfradio').value
应该是:
document.querySelector('input[name=nameOfradio]:checked').value;
请注意,CSS伪类可以通过冒号(:)来访问。
答案 1 :(得分:5)
演示:http://jsfiddle.net/majidf/LhDXG/
<强>标记强>
Sex:<br/>
<input type="radio" name="gender" value="male" /> Male<br/>
<input type="radio" name="gender" value="female" /> Female
<br/>
Age group:<br/>
<input type="radio" name="ageGroup" value="0-3" /> 0 to 3<br/>
<input type="radio" name="ageGroup" value="3-5" /> 3 to 5<br/>
<input type="radio" name="ageGroup" value="5-10" /> 5 to 10<br/>
<button onclick="getValues();">Get values</button>
<强> JS 强>
function getRVBN(rName) {
var radioButtons = document.getElementsByName(rName);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) return radioButtons[i].value;
}
return '';
}
function getValues() {
var g = getRVBN('gender');
var a = getRVBN('ageGroup');
alert(g + ' ' + a);
}
答案 2 :(得分:1)
在后来的js开发中省去一些痛苦并使用像jQuery这样的js库。然后你可以做$('input[name=radioName]:checked').val()
答案 3 :(得分:1)
这正是您应该使用javascript库的原因。
document.querySelector('input[name=nameOfradio]');
例如,在IE8之前不支持。
让图书馆处理浏览器疯狂。
在jQuery中,您可以使用$('input[name=radioName]:checked').val()
或$("form").serialize()
并完成它。
答案 4 :(得分:1)
document.querySelector('input[name=nameOfRadio]:checked').value
例如: -
<form>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
document.querySelector('input[name=gender]:checked').value
此外,如果需要,您可以在单选按钮组中向默认单选按钮添加checked
属性
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
答案 5 :(得分:0)
如果您正在寻找快速解决方案,可以使用class
属性。许多元素可以具有相同的class
。使用命令:
document.getElementsByClass('nameOfradio');
此外,您应该使用正确的名称获取元素的形式:
document.getElementsByName('nameOfradio');
您还可以使用以下代码查找所选的无线电值,如下所示:
radioObj=document.getElementsById('nameOfradio');
var radioLength = radioObj.length;
if(radioLength == undefined) {
if(radioObj.checked) {
return radioObj.value;
} else {
return "";
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";