Question

这可能看起来很愚蠢和彻头彻尾的愚蠢，但我似乎无法弄清楚如何通过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的值？

Answer 1

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

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

Answer 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属性返回，因此您必须为表单或字段集提供一些标识符，以便将无线电输入包含在其中首先抓住它。

Answer 3

如果您使用的是jQuery这样的javascript库，那就非常简单了：

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

此代码将选择带checked名称的gender输入，并获取value。简单不是吗？

Live demo

Answer 4

要获得该值，您可以执行此操作：

document.getElementById("genderf").value;

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

document.getElementById("genderf").checked;

Answer 5

尝试：


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;
  }
}

Answer 6

如果将表单元素包装在带有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>

Answer 7

没有循环：

var obj = { a : "Hello" }
with(obj) {
  alert(a) // Hello
}

document.getElementsByName('gender').reduce(function(value, checkable) { if(checkable.checked == true) value = checkable.value; return value; }, '');只是一个函数，它将顺序地将数组元素提供给回调的第二个参数，并且先前将函数返回到值，而对于第一次运行，它将使用第二个参数的值。

这种方法的唯一减号是，即使在找到所选单选按钮后，reduce也会遍历reduce返回的每个元素。

Answer 8

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">

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

8 个答案:

更新