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

Question

Hey I have two issues with this following code.

First of all when I check the checkbox number 3 it automatically checks number 2, I only want that if I check it my self (Like when I check checkbox number 2). The second issue is I can't uncheck a checkbox after checking it.

 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 ? 

if clicked input has value of demo01

cbs[3].checked=false 

set demo04 checked to false

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

else if clicked input has value of demo04

? cbs[0].checked=false 

set demo01 checked to false

: null

else, nothing...

 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

Look closely - this is not jQuery.

This gets your bigger job simplified - that of making the checkboxes work like radio buttons. Now, you should be able to quite easily add logic to make it do the rest of what you want.

The basic idea is to:

a. Trap when any checkbox is clicked
b. Store the checked checkbox value
c. Cache the checkbox itself (so we can turn it back on)
d. Uncheck ALL checkboxes
e. Re-check the one the user just checked.
f. Update div / variable with the stored value

Now, just add some additional (eg storedVal) variables to keep track of additional checkboxes.

 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>