输入错误。检查值

Question

我正在尝试在click 事件中记录单选元素的checked 属性。但它返回错误的值。

const radio = document.querySelector('input[type=radio]')
radio.addEventListener('click', (ev) => {
  ev.preventDefault();
  console.log(ev.target.checked);
})

<p class="rInput">
  <input type="radio" name="R" id="ID">
  <label for="ID">The label</label>
</p>

当点击收音机时，它应该记录检查状态，但它总是记录true。

我对此的解决方案是添加一个 0 毫秒的 timeOut，它起作用了

const radio = document.querySelector('input[type=radio]')
radio.addEventListener('click', (ev) => {
  ev.preventDefault();
  setTimeout(() => {
    console.log(ev.target.checked);
  }, 0);
})

<p class="rInput">
  <input type="radio" id="ID">
  <label for="ID">The label</label>
</p>

但是问题出在哪里，为什么会这样？有更好的解决方案吗？

Answer 1

禁用不想点击的单选按钮会更简单。

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => radio.addEventListener('click', handleClick, false));

function handleClick(e) {
  const { id, checked } = e.target;
  console.log(id, checked);
};

<div>
  <label for="1">First
    <input name="radio" id="1" type="radio">
  </label>
  <label for="2">Second (disabled)
    <input name="radio" id="2" type="radio" disabled>
  </label>
  <label for="3">Last
    <input name="radio" id="3" type="radio">
  </label>
</div>

Answer 2

好的，这是一个有点奇怪的问题。让我试着解释一下为什么我称之为奇怪问题：

1. 您正在单选按钮上设置 preventDefault，这将删除其默认属性（单选按钮与常规按钮的输入表单不同）。原因是常规按钮可以有多种状态，而 单选按钮只有 2 种状态，即 True 和 False。
2. 您仅在使用 console.log(rI.checked); 按钮 isChecked 时进行检查，因此您将始终记录 TRUE。

我希望这是有道理的。作为后续，我认为您应该检查（双关语）如何取消选中按钮。 This here is a great answer on how to do it using JS without any frameworks.

更新的代码片段：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).prop("checked") === true){
            console.log("Checkbox is checked.");
        }
        else if($(this).prop("checked") === false){
            console.log("Checkbox is unchecked.");
        }
    });
});