.checked 不识别单选按钮是否被选中

Question

我在页面上有一些单选按钮，我只需要根据 ID 确定在我的 JS 中检查了哪个单选按钮。我不确定为什么这不起作用。每次，我都会在控制台中收到“未检查”消息。谢谢！

HTML：

<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>

JS：

var aud;
if (document.getElementById('aud1').checked) {
  var aud = document.getElementById('file1');
}else if(document.getElementById('aud2').checked) {
 var aud = document.getElementById('file2');
}else if (document.getElementById('aud3').checked){
 var aud = document.getElementById('file3');
}
else console.log('nothing checked');

Answer 1

您是否明确需要此代码？为什么不使用单个类，并将文件名/描述作为自定义属性，如下所示：

    <input type="radio" name="animals" class="order" data-animal="elephant" />elephant
    <input type="radio" name="animals" class="order" data-animal="zebra" />zebra
    <input type="radio" name="animals" class="order" data-animal="lion" />lion


<script>
    $(".order").click(function () {
    var choice = this.getAttribute("data-animal");

    alert(choice);
    /* console.log(choice); */
})
</script>

这样你就不必手动继续添加更多代码，你可以使用相同的类和不同的属性值在顶部添加 html...更容易维护 -

另外，因为你有一个 elseif，我添加了一个名称来将它们分组为单独的收音机，正如我认为你想要的那样？

 <input type="radio" name="animals" class="order" checked data-animal="zebra">zebra

请记住，输入标签没有结束标签 - 只是 /> 在末尾而不是 >

Answer 2

见下文。我在您的代码中添加了一个按钮，您可以在检查后单击该按钮。

最初，当页面加载时，没有点击任何内容。您的 JS 在页面构建后立即运行，这就是您看到没有点击的原因。

document.getElementById('check-radios').onclick = function() {
  var aud;
  if (document.getElementById('aud1').checked) {
    var aud = document.getElementById('file1');
    console.log('aud1 checked');
  } 
  else if (document.getElementById('aud2').checked) {
    var aud = document.getElementById('file2');
    console.log('aud2 checked');
  } 
  else if (document.getElementById('aud3').checked) {
    var aud = document.getElementById('file3');
    console.log('aud3 checked');
  } 
  else console.log('nothing checked');
}

<input type="radio" id="aud1">elephant</input>
<input type="radio" id="aud2">prairie dog</input>
<input type="radio" id="aud3">tiger</input>

<button id="check-radios">Check for clicked</button>