删除和添加选中的单选按钮单击

Question

第一次单击选中的标记会出现，第二次单击则会消失，第三次单击则不会发生任何事情。我想在点击时重复前两个步骤。

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
e.addEventListener("click" , function(){
e.checked = true;
e.addEventListener("click" , function(){
e.checked = false;
})
})
})

<input type="radio" id="future_type" name="What type of products would you like to see in the future? Gels" value="Gels">
<label for="future_type"> Gels </label><br>
<input type="radio" id="future_type" name="What type of products would you like to see in the future? Eye care" value="Eye care">
<label for="future_type"> Eye care </label><br>

Answer 1

您不应该将单选按钮留空它们可以为空，这样您就可以避免设置默认性别问题中提到的默认性别。你不能不选择性别，这是一个必填字段，尽管你可以留下一个"；宁愿不说"；等选项；然而，这与用户从不触摸单选按钮不同。如果该字段是必需的，则不设置默认值将允许非常有用的行为；您强制用户填写该字段，而不会假定为默认值。

说这是一个非常重要的是/否问题；用户对这个是/否问题负有法律责任。在这种情况下，您不能为用户选择默认设置！但是，这个选项不能留空，他们必须做出承诺。这有什么帮助？您可以在验证中发现这一点(最好是在页面中(。这可以确保用户已经填写了字段，而不是假设默认值，这可能非常重要。

至于你的额外问题：任何使用过网络表单(或许多操作系统表单(的人都熟悉单选按钮的工作方式，因为它们非常常见。当他们第一次看到单选按钮时，他们可能会再次点击它尝试取消勾选，但他们很快就会学会。更重要的是，单选按钮的功能与现实生活中的许多物理按钮一样——最初是以共享相同功能的单选按钮命名的。

你按下一个按钮，它就会点击，并在用户无法再按下的状态下保持按下状态。同一控件上的其他按钮按下其他按钮。旧的盒式磁带播放机使用这些；快进或播放弹出"；停止"；按钮，因为这两个功能不能同时发生。

使用过按钮的用户知道你不能"取消冲压"；按钮。与单选按钮的区别在于，有些按钮会推出其他按钮

因此，总之，如果你想让用户取消按钮的切换，你最好使用复选框，如果你想要使用单选按钮，那么添加第三个按钮，上面写着"；无"；。

<fieldset>
<h2>If allowed to leave empty</h2>
<input type="checkbox" id="future_type" name="What type of products would you like to see in the future? Gels" value="Gels">
<label for="future_type"> Gels </label><br>
<input type="checkbox" id="future_type" name="What type of products would you like to see in the future? Eye care" value="Eye care">
<label for="future_type"> Eye care </label><br>
</fieldset>

<fieldset>
<h2>If a input is required </h2>
<input type="radio" id="future_type" name="action" value="Gels">
<label for="future_type"> Gels </label><br>
<input type="radio" id="future_type" name="action" value="Eye care">
<label for="future_type"> Eye care </label><br>
<input type="radio" id="future_type" name="action" value="None">
<label for="future_type"> None </label><br>
</fieldset>

Answer 2

尝试添加"if"运算符。

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
e.addEventListener("click" , function(){
if (!e.checked) {
e.checked = true;
}
if (e.checked) {
e.checked = false;
}
})
})

Answer 3

@Peter S.的答案对我不起作用。我发现这是最好的：

let yesBtn = document.querySelectorAll('input[type="radio"]');
yesBtn.forEach(function(e){
let checked;
e.addEventListener("click" , function(event){
e.checked = !checked;
checked = !checked;
console.log(e.checked);
})
})

我当然也不确定，但我认为使用单选按钮的原因是因为它们的外观，我知道复选框可以修改，但这只是一项艰巨的工作。。。