获取所选的收音机而不使用"Id"但"name"

Question

我试图通过使用"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中的新功能)

Answer 1

这一行:

document.getElementByName('nameOfradio').value

应该:

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

使用querySelector

请注意,CSS伪类由冒号(:)访问.

Answer 2

演示: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);
}

Answer 3

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