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

【问题标题】：getElementById with Radio Button not working带有单选按钮的 getElementById 不起作用
【发布时间】：2018-10-08 16:34:16
【问题描述】：

如何使用 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>

【问题讨论】：

onChange="(checkGender)" 指的是什么？
运行看看问题——checkGender是什么？
stackoverflow.com/questions/13152927/…
(1) 将 JavaScript 代码包装在您尝试引用的 checkGender 函数中。 (2) 这不是您调用函数的方式：(checkGender)。这是：checkGender()。

标签： javascript html

【解决方案1】：

你需要定义一个实际的回调函数：

function checkGender() {
    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>

【讨论】：

【解决方案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";
    }
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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。而且，这是一种不好的做法

【讨论】：