使用"name"而不是"Id"获取选定的单选按钮

Question

我试图通过使用 "document.getElementByName('nameOfradio')" 获取选中的单选按钮，因为所有单选按钮都共享相同的名称。但是，什么也没发生。我尝试了相同的方法 document.getElementById('nameOfradio') 并且运行良好。然而，我不得不为所有单选按钮提供唯一的ID。所以，当我有20个单选按钮时，它变得很混乱。因此，我想要一个快捷方式。如何通过使用它们的 "name" 获取所选单选按钮的值？ 代码：

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方面是新手）

- user893970

---

在JavaScript中，document.getElementByName()不是一个函数。打错了吗？“Element”应该是复数形式。 - Cᴏʀʏ

document.getElementsByName() 将是最接近有效的一个。 - KillerX

Answer 1

这一行：

document.getElementByName('nameOfradio').value

应该是：

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

使用 querySelector 方法。

需要注意的是，CSS 伪类通过冒号（:）来访问。

- Joe

Answer 2

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

- Sudharshan

Answer 3

这正是你应该使用 JavaScript 库的原因。

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

例如，在IE8之前不支持。

让库处理浏览器的疯狂行为。

在jQuery中，您只需使用$('input[name=radioName]:checked').val()或$("form").serialize()，就可以完成它。

- Uku Loskit

Answer 4

如果你要进行后期JavaScript开发，请使用像jQuery这样的JavaScript库来避免痛苦。这样，你就可以像这样完成某些操作：$('input[name=radioName]:checked').val()

- KillerX

Answer 5

如果你想要快速解决问题，可以使用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 "";

- Nachshon Schwartz

---

他仍然需要弄清楚哪一个被选中了。 - KillerX