Javascript 在html中仅使一个复选框互斥

我希望创建一个用户可以选择的复选框列表，并在列表底部创建一个标记为“无”的单独复选框，以便当用户选择该复选框时，所有其他复选框都将取消选中。此外，当选中“无”复选框并选择其他选项之一时，将取消选中“无”复选框。

相当简单；将

change

事件添加到所有内容中，并根据需要取消选中

var cbs=document.querySelectorAll（“.option”）
var none=document.querySelector（“.none”）
cbs.forEach（cb=>{
cb.addEventListener（“更改”，（）=>{
如果（cb.选中）
none.checked=false
})
})
无。addEventListener（“更改”，（）=>{
如果（无，选中）{
cbs.forEach（cb=>cb.checked=false）；
}
})

1
2.
3.
4.

无

以这种方式

myForm.oninput=e=>{
如果（e.target==myForm.none&&myForm.none.checked）
myForm.querySelectorAll（'input[type=radio]'）.forEach（r=>r.checked=false）
else if（e.target.matches（'input[type=radio]'）和&e.target.checked）
myForm.none.checked=false
}

演示：

const myForm=document.forms['my-form']
myForm.oninput=e=>
{
如果（e.target==myForm.none&&myForm.none.checked）
{
myForm.querySelectorAll（'input[type=radio]'）.forEach（r=>r.checked=false）
}
else if（e.target.matches（'input[type=radio]'）和&e.target.checked）
{
myForm.none.checked=false
}
}
myForm.onsubmit=e=>
{
e、 preventDefault（）//禁用提交（页面重新加载）
控制台清除（）
让formInputs=Object.fromEntries（新FormData（myForm）.entries（））
console.log（formInputs）
}

正文{
字体系列：Helvetica，Arial无衬线字体；
字体大小：12px；
}
表格{宽度：22em；}
字段集{margin:.7em；}
.作为控制台包装{最大高度：100%！重要；顶部：0；左侧：50%！重要；宽度：50%；}
.as控制台行{背景颜色：黄色；}
.as控制台行：：在{显示：无！重要；}之后

没有一个
A组
A 1
A 2
A 3
A 4
B组
B 1
B 2
B 3
B 4
C组
C1
C2
C3
C4
提交

您应该使用单选按钮而不是复选框。如果您愿意，使单选按钮看起来像复选框。但是单选按钮不允许用户选择多个内容。我认为您应该使用javascript。