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

Question

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

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

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

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

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

document.getElementByName("sex").value

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

Answer 1

• document.all.sex [0] .checked
• document.all.set [1] .Checked

Answer 2

Циклы могут выполнить задачу, как показали другие, но это может быть проще, чем использование цикла, который при желании поможет повысить производительность. Кроме того, он может быть переносным / модульным, поэтому его можно использовать для различных радиогрупп.

Простой пример

function getValue(x) {
  alert(x.value);
}

<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

Более сложный пример:

function getValue(x){
  alert(x.value);
}

<fieldset>
  <legend>Sex</legend>
  <label>Male:
    <input name="sex" type="radio" value="male" onChange="getValue(this)"/>
  </label>
  <label>Female:
    <input name="sex" type="radio" value="female" onChange="getValue(this)" />
  </label>
</fieldset>
<fieldset>
  <legend>Age Group</legend>
  <label>0-13:
    <input name="ageGroup" type="radio" value="0-13" onChange="getValue(this)" />
  </label>
  <label>13-18:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>18-30:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>30+:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
</fieldset>