Проверка значения группы радиокнопок через JavaScript?

Question

Это может показаться глупым и совершенно глупым, но я не могу понять, как проверить значение группы переключателей в моей HTML-форме с помощью JavaScript.У меня есть следующий код:

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

Как мне получить значение gender с помощью JavaScript?

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

update

В чистом Javascript без цикла, используя более новые (и потенциально еще не поддерживаемые) RadioNodeList:

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

Единственная загвоздка в том, что RadioNodeList возвращается только свойством HTMLFormElement.elements или HTMLFieldSetElement.elements, поэтому вам нужно иметь некоторый идентификатор для формы или набора полей, в который обернуты радиовходычтобы схватить это первым.

Answer 3

Если вы используете библиотеку javascript, такую ​​как jQuery, это очень просто:

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

Этот код выберет вход checked с именем gender и получит его value. Просто не правда ли?

Живая демоверсия

Answer 4

Чтобы получить значение, вы должны сделать следующее:

document.getElementById("genderf").value;

Но чтобы проверить, установлен ли переключатель установлен или выбран:

document.getElementById("genderf").checked;

Answer 5

Если вы оберните элементы формы в тег формы с атрибутом имени, вы можете легко получить значение, используя 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 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;
  }
}

Answer 7

Без цикла:

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

reduce - это просто функция, которая будет последовательно передавать элементы массива во второй аргумент обратного вызова и ранее возвращенную функцию в значение, в то время как для первого запуска она будет использоватьзначение второго аргумента.

Единственный минус этого подхода заключается в том, что Reduce будет проходить каждый элемент, возвращаемый getElementsByName, даже после того, как он обнаружил выбранную радиокнопку.