如何切换带有标签的单选按钮答案

【问题标题】：How to toggle a radio button with a label如何切换带有标签的单选按钮
【发布时间】：2020-12-18 17:00:24
【问题描述】：

我想在单击标签时取消选择单选按钮，并且以下代码仅在我单击按钮本身时才能按预期工作。

如何将标签的行为链接到按钮？

<label>
<input type="radio" name="choice" value="HTML" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false" /> Learn HTML 
</label>

<label>
<input type="radio" name="choice" value="Java" onMouseDown="this.__chk = this.checked" onClick="if (this.__chk) this.checked = false"/> Learn JavaScript 
</label>

【问题讨论】：

如果您想在点击时取消选中单选按钮，为什么要使用它们？有复选框。
这是因为我不想同时选择这两个选项。换句话说，如果需要，选择取消选择只是一种可能性。

标签： javascript html

【解决方案1】：

单选按钮并不像您想象的那样工作。要取消选择一个，您需要选择具有相同name 属性的另一个或重置表单。您所描述的功能更适合复选框而不是单选按钮。有关规格，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio。您可能还想看看这个问题/答案：Reset Particular Input Element in a HTML Form。

此外，无需在输入周围包裹标签标签。 for 属性负责链接。

【讨论】：

【解决方案2】：

如果您想取消选择单选按钮，您需要重置表单。

form {
  display: flex;
  flex-direction: column;
}

<form>
  <label for="ckb-01">
    <input id="ckb-01" type="radio" name="choice" value="HTML" />
    Learn HTML
  </label>
  <label for="ckb-02">
    <input id="ckb-02" type="radio" name="choice" value="Java" />
    Learn JavaScript
  </label>
  <label for="ckb-03">
    <input id="ckb-03" type="radio" name="choice" value="Java" />
    Learn CSS
  </label>
  <input type="reset" />
</form>

【讨论】：

【解决方案3】：

在标签中使用 for 属性

<label for='idHTML'>Learn HTML </label>

给收音机对应的 id

<input id='idHTML' type="radio" name="choice" />

【讨论】：

它没有回答问题，它的工作方式与上面的问题相同。
您的事件监听器 onMouseDown 和 onClick 没有意义。我创建了另一个帖子，如果你可以检查一下。
你应该修改你的其他帖子。

【解决方案4】：

这是什么意思。__chk

onMouseDown="this.__chk = this.checked"
onClick="if (this.__chk) this.checked = false"

如果你想只选择一个，你可以简单地输入 radio 并用一个 name='choice' 分组选项

如果你想选中和取消选中多个选项，你可以使用复选框

【讨论】：

【解决方案5】：

经过多次尝试，我终于设法用一些 javascript 编写了一个可行的解决方案。

问题在于，一旦单击单选按钮，它的状态就会改变。需要存储之前的值才能知道是否必须取消选择。

<main id="form">
    <label >
      <input type="radio" name="rad" id="Radio0" />Learn Html
    </label>
    <br><br>
    <label>
      <input type="radio" name="rad" id="Radio1" />Learn CSS
    </label>
    <br><br>
    <label>
      <input type="radio" name="rad" id="Radio2" />Learn Java
    </label>
</main>



<script>
    let buttons = document.querySelectorAll('#form input');
    for (button of buttons){
        button.dataset.waschecked="false";
        button.addEventListener('click', myFunction, false);
    }


function myFunction(e) {
  if (e.originalTarget.dataset.waschecked == "false"){
    
    for (button of document.querySelectorAll('#form input')){
        button.dataset.waschecked = "false";
    }
    e.originalTarget.dataset.waschecked = "true";
    e.originalTarget.checked =true;
  }else {
    for (button of document.querySelectorAll('#form input')){
        button.dataset.waschecked = "false";
    }
    e.originalTarget.checked =false;
  }
}
</script>

欢迎任何改进此代码的建议。

【讨论】：