當我檢查另一個復選框時取消選中復選框

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>