当我检查另一个复选框时取消选中复选框

Question

嘿，下面的代码有两个问题。

首先，当我检查第 3 号复选框时，它会自动检查第 2 号，我只希望我自己检查它（就像我检查第 2 号复选框时一样）。 第二个问题是我无法在选中复选框后取消选中它。

 var cbs = document.getElementsByName("test"); function demo(obj) { var hzp = cbs[1]; var ht = cbs[2]; for (var i = 0; i < cbs.length; i++) { if(cbs[i].value == hzp.value || cbs[i].value === ht.value) { if(cbs[i].value == obj.value) { if(cbs[i].checked && hzp.checked || ht.checked) { hzp.checked = true; ht.checked = true; } } } cbs[i].checked = false; } obj.checked = true; }

 checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01" onClick="demo(this)"> checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02" onClick="demo(this)"> checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03" onClick="demo(this)"> checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04" onClick="demo(this)">

Answer 1

e.target.value==cbs[0].value ? 

如果单击输入的值为 demo01

cbs[3].checked=false 

将 demo04 设置为 false

: e.target.value==cbs[3].value 

否则，如果单击输入的值为 demo04

? cbs[0].checked=false 

将 demo01 设置为 false

: null

别的，什么都没有……

 var cbs = document.getElementsByName("test") cbs.forEach( test => {test.addEventListener("change", (e) => { e.target.value==cbs[0].value? cbs[3].checked=false: e.target.value==cbs[3].value? cbs[0].checked=false: null }) })

 checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01" > checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02"> checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03"> checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04">

Answer 2

仔细看——这不是 jQuery。

这简化了您更大的工作 - 使复选框像单选按钮一样工作。 现在，您应该能够很容易地添加逻辑以使其执行您想要的 rest。

基本思想是：

一个。 单击任何复选框时捕获
湾。 存储选中的复选框值
c。 缓存复选框本身（这样我们就可以重新打开它）
d。 取消选中所有复选框
e. 重新检查用户刚刚检查的那个。
F。 用存储的值更新 div / 变量

现在，只需添加一些额外的（例如，storedVal）变量来跟踪额外的复选框。

 const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); var storedVal = ''; $$('input').forEach((el) => { el.addEventListener('click', function(e){ storedVal = e.target.value; let ckcb = e.target; uncheckAll(); ckcb.checked = true; console.log(storedVal); $('#msg').innerText = storedVal; }); }); const uncheckAll = () => { $$('input').forEach((el) => { el.checked = false; }); }

 #msg{ position:absolute; top:70px; right:30px; font-size:2rem; padding:10px; background:wheat; }

 checkbox 1 <input type="checkbox" name="test" id="demo1" value="demo01"> checkbox 2 <input type="checkbox" name="test" id="demo2" value="demo02"> checkbox 3 <input type="checkbox" name="test" id="demo3" value="demo03"> checkbox 4 <input type="checkbox" name="test" id="demo" value="demo04"> <div id="msg"></div>