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

Ответ 1

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

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

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

Живая демонстрация

Ответ 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, поэтому вам нужно иметь некоторый идентификатор формы или набора полей, в который вставляются радиовходы, чтобы сначала захватить его.

Ответ 3

Используйте document.querySelector(), если вы хотите избежать фреймворков (что я почти всегда хочу делать).

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

Ответ 4

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

document.getElementById("genderf").value;

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

document.getElementById("genderf").checked;

Ответ 5

Try:

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

Ответ 6

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

Ответ 7

Без цикла:

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

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

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