单选按钮不会选中/取消选中答案

【问题标题】：radio buttons won't check / uncheck单选按钮不会选中/取消选中
【发布时间】：2021-04-12 20:27:26
【问题描述】：

我的网页中有一些单选按钮。单击单选按钮时，它会检查，但是当我再次单击时，它不会取消选中。我试图在onclick上添加一个JS函数

document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
        if(this.checked == true){
            this.checked = false;
        }
        else {
            this.checked = true;
        }
    }))

当我添加此方法时，它允许我取消选中但不允许我检查其中任何一个！我能错过什么？

这些是我的复选框：

<input type="radio" id="name" name="name"><br>
<input type="radio" id="age" name="age"><br>
<input type="radio" id="email" name="email"><br>

【问题讨论】：

最后加一个分号。
JavaScript 不一定需要分号。我试过了，但没有任何区别。
参考这个，w3schools.com/jquery/tryit.asp?filename=tryjquery_sel_radio
对于您共享的链接，无线电具有相同的名称，因此当您检查另一个时，其中一个未被选中。即您只能选择一个。在我的情况下，收音机是完全不相关的，它们中的每一个都指的是不同的东西。我试图能够检查或取消检查任何。也许所有。也许没有。
如果您只想选择一个，您应该给出相同的名称。并选择几个单选按钮，您应该在我的回答中给出不同的名称。但在第二种情况下，最好使用复选框。

标签： javascript html dom frontend radio

【解决方案1】：

它们都有不同的name 属性值 - 因此它们只能被检查（因为它们没有与另一个同级单选值进行比较）。我想你可能正在寻找type="checkbox"：

<input type="checkbox" id="name" name="name"><br>
<input type="checkbox" id="age" name="age"><br>
<input type="checkbox" id="email" name="email"><br>

【讨论】：

@laylal00 随意标记为已回答您的问题，以帮助将来可能遇到相同问题的人:)

【解决方案2】：

示例：按住Ctrl（Mac 上为⌘）键取消选中。

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

<input type="radio" name="test" value="1" />
<input type="radio" name="test" value="2" checked="checked" />
<input type="radio" name="test" value="3" />

【讨论】：

我能知道 e 指的是什么吗？这是我需要在浏览器上定义的东西还是只是一个变量？因为 e 显示此解决方案未定义
e 是事件对象的短 var 引用，它将被传递给事件处理程序。

【解决方案3】：

使用<input type="checkbox"，而不是<input type="radio"。单选按钮用于您必须选择某些选项之一（必须具有相同的name）。

例如，

<input type="radio" name="gender" id="male" value="male"> <br>
<input type="radio" name="gender" id="female" value="female"> <br>
<input type="radio" name="gender" id="other" value="other">

了解更多关于radio button和check boxes的信息。

【讨论】：

【解决方案4】：

 document.querySelectorAll('input[type="radio"]').forEach(x => x.addEventListener('click',function(){
    if(this.value == 0){
          this.checked = true;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 1;
      }
      else {

          this.checked = false;
          document.querySelectorAll('input[type="radio"]').forEach(x=>x.value=0);
          this.value = 0;
      }      
}))

<input type="radio" value="0" id="name" name="test"><br>
<input type="radio" value="0" id="age" name="test"><br>
<input type="radio" value="0" id="email" name="test"><br>

【讨论】：