One checkbox checked at a time - not radio buttons

Question

First, before you recommend radio buttons, I want to use checkboxes because they can be unchecked. I have 2 custom checkboxes #c1 & #c2; I want one open at a time (so if c1 was open, clicking c2 will uncheck c1); and I want both to be able to be unchecked. Any ideas would be greatly appreciated!

Here's what I've tried:`

 let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); function oneAtATime() { if (c1.checked) { c2.checked = false; } else if (c2.checked) { c1.checked = false; } } c1.addEventListener('change', oneAtATime); c2.addEventListener('change', oneAtATime); 

 <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"> <h2>example</h2> </label> <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"> <h2>example</h2> </label> 

Answer 1

For jQuery >= 1.6

$('.check').prop('checked', true);
$('.check').prop('checked', false);

For jQuery < 1.6:

$('.check').attr('checked', true);
$('.check').attr('checked', false);

Snippet:

 $('.check').click(function(){ if ($(this).is(':checked')) { $('.check').prop('checked', false); $(this).prop('checked', true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"> <h2>example</h2> </label> <input id="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"> <h2>example</h2> </label> 

Answer 2

Just check if the item being clicked has been turned on or off, like:

 let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); function oneAtATime() { if (this.checked){ // Item clicked has been turned on if (this == c1){ c2.checked = false; } else { c1.checked = false; } } } c1.addEventListener('change', oneAtATime); c2.addEventListener('change', oneAtATime); 

 <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"> <h2>example</h2> </label> <input id="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"> <h2>example</h2> </label> 

Answer 3

You can use this in the event listener to refer to the element that was clicked on. You only need to uncheck the other box when you're checking the current box.

 let c1 = document.getElementById('c1'); let c2 = document.getElementById('c2'); function oneAtATime() { if (this.checked) { let other = this == c1 ? c2 : c1; other.checked = false; } } c1.addEventListener('change', oneAtATime); c2.addEventListener('change', oneAtATime); 

 <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"> <h2>example</h2> </label> <input id="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"> <h2>example</h2> </label> 

Answer 4

 c1.onclick=()=>{ if(c2.checked) c2.checked=false; } c2.onclick=()=>{ if(c1.checked) c1.checked=false; } 

 <input id="c1" type="checkbox" name="checkbox" class="check"> <label for="c1"><h2>example</h2></label> <input id="c2" type="checkbox" name="checkbox" class="check"> <label for="c2"><h2>example</h2></label> 

First you should change id to c2 to the second section, and make sure the for attribute to c2 too, then check out this easy vanilla JS function, thanks.

Answer 5

this will work as you requested with the 2 checkbox tick enabled by default ,

it will work with any jquery version as well .

if you clicked in any checkbox the other one will be unticked .

hope this helps you :)

on your html page this is the code :

<input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()">
<label for="c1">
<h2>example</h2>
</label>
<input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()">
<label for="c1">
<h2>example</h2>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<Script>


function unloadc2() { 
document.getElementById("c1").checked = false;
document.getElementById("c2").checked = true;

}

function unloadc1() { 


document.getElementById("c2").checked = false;
document.getElementById("c1")

  <input id="c1" type="checkbox" name="checkbox" class="check" onchange="unloadc1()"> <label for="c1"> <h2>example</h2> </label> <input id="c2" type="checkbox" name="checkbox" class="check" onchange="unloadc2()"> <label for="c1"> <h2>example</h2> </label> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <Script> function unloadc2() { document.getElementById("c1").checked = true; document.getElementById("c2").checked = false; } function unloadc1() { document.getElementById("c2").checked = true; document.getElementById("c1").checked = false; } $(function() { document.getElementById("c1").checked = true; document.getElementById("c2").checked = true; }); </script>