javascript - 如何添加事件侦听器以使用常规 javascript 检查单选按钮？

Question

正如您在下面的代码片段中看到的，如果选中了两个按钮，则会输入错误。我想实时执行此操作，而不必执行“checked =”checked”。我不确定如何处理事件侦听器为达到这个

function check(form) {
  let count = 0
  const boxes = form.querySelectorAll("input[type=checkbox]")
  boxes.forEach(box => {
    if(box.checked === true) {
      count += 1
    }
  })
  if(count > 1) {
    const error = form.querySelector("span[class=error]")
    error.innerHTML = "don't check more than 1"
  }
  


}
check(document.querySelector("#form1"))

<form id="form1">

            <label>A
                <input type="checkbox" checked="checked">

            </label> <br />


            <label>B
                <input type="checkbox" checked="checked">
            </label> <br />
            
             <label>C
                <input type="checkbox">
            </label> <br />
            
            <span class="error"> </span>

</form>

标签： javascript

Answer 1

您可以使用更改事件。

let count = 0
  const boxes = form.querySelectorAll("input[type=checkbox]")
  boxes.forEach(box => {
      box.addEventListener("change", function(e){
          if(box.checked) count++;
           else count--;
           if(count > 1) {
            const error = form.querySelector("span[class=error]")
            error.innerHTML = "don't check more than 1"
           }
      });
  });