如何通过单击其标签取消选中选中的无线电输入？答案

【问题标题】：How can I uncheck a checked radio input by click on its label?如何通过单击其标签取消选中选中的无线电输入？
【发布时间】：2021-11-03 06:39:57
【问题描述】：

这是代码

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

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

【问题讨论】：

为什么（错误）使用单选按钮？为什么不使用复选框？
您可以通过使用复选框而不是单选按钮轻松实现这一目标
我发现下面这些方法有效，检查一下here
@enhzflep 我将它用于 CSS 菜单选择器。使用复选框，我必须再次取消选中所有其他复选框

标签： javascript queryselector

【解决方案1】：

一个简单的方法是使用.checked JS 属性，如下面的sn-p：

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>

更多信息请点击here

【讨论】：