Javascript 在不使用“Id”但使用“name”的情况下获取选定的收音机
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7275597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting the selected radio without using "Id" but "name"
提问by user893970
I was trying to get selected radio button by using "document.getElementByName('nameOfradio')" because all of the radio buttons share the same name. But, nothing happened. I tried the same thing with document.getElementById('nameOfradio') and worked well.However, I had to give unique id for all of the radio buttons. So that, it turns ugly when i have 20 radio buttons. As a result, what I wanted is making a shortcut. How can i get the value of selected radio button by using their "name"? Codes;
我试图通过使用“document.getElementByName('nameOfradio')”来获取选定的单选按钮，因为所有的单选按钮都具有相同的名称。但是，什么也没发生。我用 document.getElementById('nameOfradio') 尝试了同样的事情并且效果很好。但是，我必须为所有单选按钮提供唯一的 id。所以，当我有 20 个单选按钮时，它变得丑陋。结果，我想要的是制作一条捷径。如何使用“名称”获取所选单选按钮的值？代码；
Html
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(relavant part of radio3())
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);
As i said document.getElementById worked but it requires too much work:( How can i make it simplier by using common feature of radio buttons, instead of giving them unique id? A short explanation why i could not make it would be very helpful(new in javascript and ajax)
正如我所说的 document.getElementById 工作，但它需要太多的工作:( 我怎样才能通过使用单选按钮的通用功能来简化它，而不是给它们唯一的 id？一个简短的解释为什么我不能让它变得非常有帮助（ javascript 和 ajax 中的新内容）
采纳答案by Majid Fouladpour
Demo: http://jsfiddle.net/majidf/LhDXG/
演示：http: //jsfiddle.net/majidf/LhDXG/
Markup
标记
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
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);
}
回答by Joe
This line:
这一行：
document.getElementByName('nameOfradio').value
should be:
应该：
document.querySelector('input[name=nameOfradio]:checked').value;
using querySelector
Note that CSS pseudo-classes are accessed by a colon (:).
请注意，通过冒号 (:) 访问 CSS 伪类。
回答by Sudharshan
document.querySelector('input[name=nameOfRadio]:checked').value
Eg:-
例如：-
<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
Also, you can add a checkedattribute to a default radio button among the group of radio buttons if needed
此外，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
回答by KillerX
Save yourself some pain in the later js dev and use a js library like jQuery. Then you can do something like $('input[name=radioName]:checked').val()
为自己在后来的 js 开发中省去一些痛苦，并使用像 jQuery 这样的 js 库。然后你可以做类似的事情$('input[name=radioName]:checked').val()
回答by Uku Loskit
This is exactly why you should use a javascript library.
这正是您应该使用 javascript 库的原因。
document.querySelector('input[name=nameOfradio]');
for example is not supported before IE8.
例如在 IE8 之前不支持。
Let the library handle the browser craziness.
让图书馆处理浏览器的疯狂。
In jQuery you can just use $('input[name=radioName]:checked').val()or $("form").serialize()and be done with it.
在 jQuery 中，您可以使用$('input[name=radioName]:checked').val()或$("form").serialize()完成它。
回答by Nachshon Schwartz
You can use the classproperty if your looking for a quick solution. Many elements can have the same class. use the command:
class如果您正在寻找快速解决方案，您可以使用该属性。许多元素可以具有相同的class. 使用命令：
document.getElementsByClass('nameOfradio');
In addition you should use the correct form of getting elements by name which is:
此外，您应该使用按名称获取元素的正确形式，即：
document.getElementsByName('nameOfradio');
You can also use the following code to find the selected radio value as follows:
您还可以使用以下代码来查找选定的无线电值，如下所示：
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 "";
