Question

如何使用onChange在javascript中获取单选按钮值？

这是我的HTML：

if (document.getElementById('male').checked) {
    document.getElementById('gender2').innerHTML = "Male";
}
    
if (document.getElementById('female').checked) {
    document.getElementById('gender2').innerHTML = "Femmale";
}

<div class="radio">
   	<label>
      	<input type="radio" name="gender" onChange="(checkGender)" id="male" value="Male">
    		Male
   	</label>
   	<label>
    		<input type="radio" name="gender" onChange="(checkGender)" id="female" value="Female">
    		Female
    </label>
</div>

<td>Gender</td>
<td><span id="gender2"></span></td>

Answer 1

您需要为回调定义一个实际功能：

＆＃13;

function checkGender() {
    if (document.getElementById('male').checked) {
        document.getElementById('gender2').innerHTML = "Male";
    }
    
    if (document.getElementById('female').checked) {
        document.getElementById('gender2').innerHTML = "Femmale";
    }
}

＆＃13;

<div class="radio">
   	<label>
      	<input type="radio" name="gender" onChange="checkGender()" id="male" value="Male">
    		Male
   	</label>
   	<label>
    		<input type="radio" name="gender" onChange="checkGender()" id="female" value="Female">
    		Female
    </label>
</div>

<td>Gender</td>
<td><span id="gender2"></span></td>

＆＃13;

Answer 2

当页面加载时，您的JavaScript会执行一次。当事情发生变化（基于事件）时，您需要调用它，并对变化作出反应。

HTML：

<div class="radio">
    <label>
        <input type="radio" name="gender" onclick="checkGender()" id="male" value="Male">
        Male
    </label>
    <label>
        <input type="radio" name="gender" onclick="checkGender()" id="female" value="Female">
        Female
    </label>
</div>

JS：

function checkGender() {
    if (document.getElementById('male').checked) {
        document.getElementById('gender2').innerHTML = "Male";
    }

    if (document.getElementById('female').checked) {
        document.getElementById('gender2').innerHTML = "Femmale";
    }
}

Answer 3

使用Element.addEventListener()向容器（.radio）添加事件处理程序。触发处理程序时，使用Element.matches()检查事件目标是否为单选按钮。如果是，则单选按钮更新#gender1 div：

的值

＆＃13;

var radio = document.querySelector('.radio');
var gender2 = document.getElementById('gender2');

radio.addEventListener('change', function(e) {
  if(!e.target.matches('input[type=radio]')) return;
  
  gender2.innerText = e.target.value;
});

＆＃13;

<div class="radio">
  <label>
        <input type="radio" name="gender" value="Male">
        Male
    </label>
  <label>
        <input type="radio" name="gender" value="Female">
        Female
    </label>
</div>

<div id="gender2"></div>

＆＃13;

Answer 4

您可以在单选按钮上添加事件侦听器并检查值。

var radios = document.querySelectorAll('input[type=radio]');

var genderEl = document.getElementById("gender");

for(var i=0; i< radios.length; i++)
{
     radios[i].addEventListener("click", function(){
       genderEl.innerHTML = this.value
     
     })

}

<div class="radio">
    <label>
        <input type="radio" name="gender"   id="male" value="Male">
        Male
    </label>
    <label>
        <input type="radio" name="gender"   id="female" value="Female">
        Female
    </label>
    
    <h3 id="gender"></h3>
</div>

注意：您应始终使用eventlisteners而不是使用内联事件处理程序。内联事件处理程序的计算结果为eval。而且，这是一种不好的做法

带有单选按钮的getElementById不起作用

4 个答案: