通过 JavaScript 检查单选按钮组的值？

Posted 2023-02-22

【中文标题】通过 JavaScript 检查单选按钮组的值？

【英文标题】：Checking Value of Radio Button Group via JavaScript?

【发布时间】：2012-03-22 15:04:55

【问题描述】：

这可能看起来很愚蠢而且非常愚蠢，但我似乎无法弄清楚如何通过 javascript 在我的 html 表单中检查单选按钮组的值。我有以下代码：

<input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>

如何通过 JavaScript 检索 gender 的值？

【参考方案1】：

如果您想避免使用框架（我几乎总是想要这样做），请使用 document.querySelector()。

document.querySelector('input[name="gender"]:checked').value

【讨论】：

这需要更多的支持，.querySelector() 是对许多 jQuery 问题的普通答案...

这是第一次，我以前从未登录过，只是为了给某人投票。

@Misunderstood 同样在这里。必须登录才能投票

这个答案让我很抱歉，社区或版主以后无法更改问题的答案。当然，在充分尊重所选答案的情况下（针对参与该决定的两个人）。

我喜欢这个答案。如果您知道自己在做什么，则无需繁琐的框架。 :-)

【参考方案2】：

在纯 Javascript 中：

var genders = document.getElementsByName("gender");
var selectedGender;

for(var i = 0; i < genders.length; i++) 
   if(genders[i].checked)
       selectedGender = genders[i].value;
 

更新

在没有循环的纯 Javascript 中，使用更新的（可能尚不支持）RadioNodeList：

var form_elements = document.getElementById('my_form').elements;
var selectedGender = form_elements['gender'].value;

唯一的问题是RadioNodeList 仅由HTMLFormElement.elements 或HTMLFieldSetElement.elements 属性返回，因此您必须为包含无线电输入的表单或字段集提供一些标识符才能首先获取它。

【讨论】：

加一个用于回答标题而不提供 jQuery 答案。

【参考方案3】：

如果你使用 jQuery 之类的 javascript 库，这很容易：

alert($('input[name=gender]:checked').val());

此代码将选择名称为gender 的checked 输入，并得到value。是不是很简单？

Live demo

【讨论】：

问题是“Javascript”，而不是“jQuery”。

@MattiSG，既然它被接受了，我想它帮助了提问者（和许多其他人）......

好吧，我在寻找 Javascript 解决方案时遇到了这个问题，这个问题没有标记为 jQuery，当我阅读问题时它没有提到 jQuery，我认为接受的答案不应该有对 jQuery 的依赖。但这就是群众的力量，你知道 ;) 我自己的反对票对于你帮助回答这个问题的所有其他人来说不会有太大变化 :)

检查来自@daelf 的纯 js 答案..!!

JQuery 当时还行。

【参考方案4】：

要获得价值，您可以这样做：

document.getElementById("genderf").value;

但要检查单选按钮是选中还是选中：

document.getElementById("genderf").checked;

【讨论】：

这不是问题所在。你不能在这里使用ID，因为你不知道id，或者你可能有无数的单选按钮，但是你想知道哪个值将被发送到服务器（组的选定值）。所以这个答案并不能真正回答问题

@vsync 不确定您的意思，OP 没有提及服务器，并在其标题中询问 (1) 如何检查值和 (2) 如何获取值，这两个我都根据 OP 提供的代码回答了。

我明白我没有很好地解释它：你提出的建议永远不会奏效，甚至没有意义。在这种情况下，您绝对不能使用getElementById。见this answer。

id 在获取值时出现问题，我有两个同名的 id 它只得到第一个 id 值而不是第二个

【参考方案5】：

如果您将表单元素包装在带有 name 属性的表单标签中，您可以使用 document.formName.radioGroupName.value 轻松获取值。

<form name="myForm">
    <input type="radio" id="genderm" name="gender" value="male" />
    <label for="genderm">Male</label>
    <input type="radio" id="genderf" name="gender" value="female" />
    <label for="genderf">Female</label>
</form>

<script>
    var selected = document.forms.myForm.gender.value;
</script>

【讨论】：

这似乎存在跨浏览器问题。

这似乎也不再适用于 Chrome。我敢肯定它做过一次。 :(

你忘记了.forms 和.elements！所以应该是document.forms.myForm.gender.value

你的答案似乎比其他人更容易理解谢谢:)。

【参考方案6】：

试试：

var selectedVal; for( i = 0; i < document.form_name.gender.length; i++ ) if(document.form_name.gender[i].checked) selectedVal = document.form_name.gender[i].value; //male or female break;

【参考方案7】：

无循环：

document.getElementsByName('gender').reduce(function(value, checkable) 
    if(checkable.checked == true) 
        value = checkable.value; 
    return value;
, '');

reduce 只是一个函数，它将按顺序将数组元素提供给回调的第二个参数，并将之前返回的函数返回到值，而对于第一次运行，它将使用第二个参数的值。

这种方法的唯一缺点是，reduce 将遍历 getElementsByName 返回的每个元素，即使它找到了选中的单选按钮。

【参考方案8】：

ES5+的另一种解决方案

[...document.getElementsByName("gender")].find(input => input.checked).value;

【参考方案9】：

function myFunction() 
document.getElementById("text").value='male'
 document.getElementById("myCheck_2").checked = false;
  var checkBox = document.getElementById("myCheck");
  var text = document.getElementById("text");
  if (checkBox.checked == true)
    text.style.display = "block";
   else 
     text.style.display = "none";
  

function myFunction_2() 
document.getElementById("text").value='female'
 document.getElementById("myCheck").checked = false;
  var checkBox = document.getElementById("myCheck_2");
  var text = document.getElementById("text");
  if (checkBox.checked == true)
    text.style.display = "block";
   else 
     text.style.display = "none";
  

Male: <input type="checkbox" id="myCheck"  onclick="myFunction()">
Female: <input type="checkbox" id="myCheck_2"  onclick="myFunction_2()">

<input type="text" id="text" placeholder="Name">