我如何取消选中的无线电输入点击它的标签？

Question

这是密码

我有一组相同名字的隐藏无线电输入

    <input name="megamenu" type="radio" id="menu-1" hidden>
    <label class="nav-link" for="menu-1">menu1</label>
    
    <input name="megamenu" type="radio" id="menu-2" hidden>
    <label class="nav-link" for="menu-2">menu2</label>
    
    <input name="megamenu" type="radio" id="menu-3" hidden>
    <label class="nav-link" for="menu-3">menu3</label>

当我点击每个标签时，它们都会被检查。我如何取消选中的无线电输入点击它的标签？

我的尝试

    if (document.querySelector('input[name="megamenu"]:checked')) {
      document.querySelectorAll('input[name="megamenu"]:checked').forEach((elem) => {
        elem.addEventListener("click", function(event) {
    
          event.target.checked = false;
    
        });
      });
    }

我也试过这个

    var radios = document.querySelectorAll('input[name="megamenu"]:checked');
    for(i=0; i<radios.length; i++ ) {
        radios[i].onclick = function(e) {
            if(e.ctrlKey || e.metaKey) {
                this.checked = false;
            }
        }
    }

Answer 1

要做到这一点，一种简单的方法是使用.checked JS属性，如下所示：

​

let label = document.getElementById('label-id');
let radioBTN = document.getElementById('radio-id');

label.addEventListener('click', function(){ radioBTN.checked = false })

<input id='radio-id' type='radio' checked/>  <br><br>

<label id="label-id" style='cursor:pointer'>
  Click this label to uncheck the radio button
</label>

​

有关更多信息，请单击这里