Проверка значения группы переключателей через JavaScript?

Это может показаться глупым и совершенно глупым, но я не могу понять, как проверить значение группы переключателей в моей 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?

7 52
javascript forms html radio-button

7 ответов:

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

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

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

демо

67

использовать документ.querySelector() Если вы хотите избежать рамок (которые я почти всегда хочу).

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

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

83

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

document.getElementById("genderf").value;

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

document.getElementById("genderf").checked;
9

попробуй:


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

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

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

без петли:

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

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

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

0