How to uncheck a checkbox when another one is checked?

Question

With Javascript, I would like one first checkbox to get unchecked when I check the second one. I also would like that the two checkboxes can be unchecked after having been checked.

Here is my HTML code :

<input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label>
<input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>

I tried with two checkboxes, but I don't manage to uncheck #1 when #2 is checked.

Here is my Jsfiddle with the example with two checkboxes: http://jsfiddle.net/3f66j30y/

I also tried with two radio buttons, but I don't manage to remain them unchecked after having been checked.

Answer 1

Add an onclick event to each checkbox to uncheck the other checkbox

 input[type="checkbox"] { display:none; } input[type="checkbox"] + label { padding:10px 10px; text-align:center; background:#dedede; color:black; height: 20px; width: 100px; display:inline-block; } input[type="checkbox"]:checked + label { padding:10px 10px; text-align:center; background:green; color:white; height: 20px; width: 100px; display:inline-block; } 

 <input type="checkbox" id="radio-1" class="radio" onclick="document.getElementById('radio-2').checked = false"/><label for="radio-1">Yes</label> <input type="checkbox" id="radio-2" class="radio" onclick="document.getElementById('radio-1').checked = false"/><label for="radio-2">No</label> 

Answer 2

Use jQuery to achieve this.

 $(".radio").change(function() { var checked = $(this).is(':checked'); $(".radio").prop('checked',false); if(checked) { $(this).prop('checked',true); } }); 

 input[type="checkbox"] { display:none; } input[type="checkbox"] + label { padding:10px 10px; text-align:center; background:#dedede; color:black; height: 20px; width: 100px; display:inline-block; } input[type="checkbox"]:checked + label { padding:10px 10px; text-align:center; background:green; color:white; height: 20px; width: 100px; display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label> <input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label> 

Answer 3

The following in a Vanilla JS solution, which:

• binds change events when the DOM is loaded
• only binds one change event to the parent container
• in the change event, decides what the target is and turns off other checkboxes

 document.addEventListener('DOMContentLoaded', function() { document.querySelector('.select-group').onchange = changeEventHandler; }, false); function changeEventHandler(e) { var cbs = document.querySelectorAll('.cb'); cbs.forEach(function(cb) { if (cb != e.target) cb.checked = false; }); } 

 input[type="checkbox"] { display: none; } label { padding: 10px 10px; text-align: center; background: #dedede; color: black; height: 20px; width: 100px; display: inline-block; } input[type="checkbox"]:checked+label { padding: 10px 10px; text-align: center; background: green; color: white; height: 20px; width: 100px; display: inline-block; } 

 <div class="select-group"> <input id="cb_yes" type="checkbox" value="yes" class="cb" /> <label for="cb_yes">Yes</label> <input id="cb_no" type="checkbox" value="no" class="cb" /> <label for="cb_no">No</label> </div> 

It can certainly be improved; after all, one obvious point is that you're searching the DOM for the checkboxes every time they change — you could easily cache them. However, this should serve a point and show you how easy it is to work with standard JS.

Answer 4

Behavior you are looking for is specific to radio buttons. However the problem is - you can't uncheck it, once checked. In this case you can use three radio buttons - yes, no and none (-) - since clearly you want more then two options:

 <input type="radio" id="radio-0" name="group-one" class="radio" checked /><label for="radio-0">-</label><br> <input type="radio" id="radio-1" name="group-one" class="radio" /><label for="radio-1">Yes</label><br> <input type="radio" id="radio-2" name="group-one" class="radio" /><label for="radio-2">No</label> 

If you prefer to stick with two, you can use your checkboxes with a bit of JavaScript to switch the opposite box off:

 function radioSwitch(opposite) { document.getElementById(opposite).checked = false; } document.getElementById("radio-1").addEventListener("click", function() { radioSwitch("radio-2"); }); document.getElementById("radio-2").addEventListener("click", function() { radioSwitch("radio-1"); }); 

 <input type="checkbox" id="radio-1" class="radio" /><label for="radio-1">Yes</label> <input type="checkbox" id="radio-2" class="radio" /><label for="radio-2">No</label>