Как мы можем получить доступ к значению переключателя, используя DOM?

Question

Как мы можем получить доступ к значению переключателя, используя DOM?

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

<input name="sex" type="radio" value="male">

<input name="sex" type="radio" value="female">

Они находятся внутри формы с именем form1. Когда я пытаюсь

document.getElementByName("sex").value

возвращает «мужчина» всегда независимо от проверенного значения.

Answer 1

Просто, чтобы "обобщить" очень полезную функцию Канавара:

function getRadioValue(theRadioGroup)
{
    var elements = document.getElementsByName(theRadioGroup);
    for (var i = 0, l = elements.length; i < l; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

... на который теперь ссылаются так:

getRadioValue('sex');

Странно, что нечто подобное уже не является частью prototype.js.

Answer 2

Если вам нужен выбранный, большинство фреймворков поддерживают такую ​​функциональность:

//jQuery
$("input[name='sex']:checked").val()

Answer 3

Есть несколько способов.

1. Поставьте идентификатор на каждом входе

<input name="sex" id="sex_male" type="radio" value="male">
<input name="sex" id="sex_female" type="radio" value="female">

Тогда вы можете использовать document.getElementById("sex_male")

2. Используйте что-то вроде PrototypeJS (тоже работает jQuery)

Тогда вы можете сделать что-то вроде этого:

//This loops over all input elements that have a name of "sex"
$$('input[name="sex"]').each( function(elem) {
  //Do something
});

Или даже это, чтобы получить только "мужской" переключатель:

$$('input[name="sex"][value="male"]').each(function(elem) {
  //Do something
});

Простой способ начать работу с Prototype - включить его в Google, добавив его между тегами вашей страницы:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>

Answer 4

Вы можете получить значение выбранного радио этим методом:

<script>
function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('sex').length; i++)
    {
        if (document.getElementsByName('sex')[i].checked)
        {
            return document.getElementsByName('sex')[i].value;
        }
    }
}
</script>

Answer 5

Удивительно, что никто не предложил использовать API Selector:

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

Хорошая поддержка браузера

Answer 6

Если вы хотите выбрать один, но у вас нет удобной платформы, вы можете перебрать массив элементов в поисках того, какой из них проверен:

for (var i = 0; i < document.form1.sex.length; i++) {
    if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);
}

Answer 7

function getEleByName(){
    if(true==document.getElementsByName('gender')[0].checked){
        alert('selected gender is: male');
    }
    else{
        alert('selected gender is: female');
    }
}

Answer 8

document.getElementByName("sex").value

Вы имеете в виду getElementsByName('sex')[0].value? (Там нет getElementByName.)

Это, конечно, всегда будет выбирать первый элемент ввода с таким именем - тот, чье значение действительно мужской. Затем вы проверяете, выбран ли он, используя свойство «.checked».

В этом простом случае вы можете получить:

var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';

В общем случае вы должны переключаться между каждым радиовходом, чтобы увидеть, какой из них проверен. Вероятно, было бы лучше сначала получить объект формы (поместить идентификатор в форму и использовать document.getElementById, как правило, лучше, чем использовать коллекцию document.forms на основе имени), а затем получить доступ к form.elements.sex для список, если на странице есть какие-либо другие элементы, которые имеют атрибуты name="sex" (потенциально отличные от полей формы).

Answer 9

var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
   if(list[i].type=='radio' && list[i].checked){
      alert(list[i].value);
      break;
   }
}

Answer 10

Если вы используете document.form1.sex, вам возвращается массив.

document.form1.sex[0] = первая радиокнопка

document.form1.sex[1] = вторая радиокнопка

Чтобы проверить, что проверено, вам нужно выполнить цикл:

whoChecked(document.form1.sex)

function whoChecked(fieldName) {
   for(var x=0;x<fieldName.length;x++) {
     if(fieldName[x].checked) {
        return fieldname[x].value
     }
}