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: /

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

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/3f66j30y/

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

• javascript
• html
• checkbox

• 2 Radio buttons require a radio button in a group to be checked, hence you couldn't uncheck both – Nick is tired Commented Mar 18, 2017 at 3:05
• "I also would like that the two checkboxes can be unchecked after having been checked." ? – Ousmane D. Commented Mar 18, 2017 at 3:05
• 1 @OusmaneMahyDiaw I think he means he want's these 3 possible binations(on-off,off-on,off-off) – Nick is tired Commented Mar 18, 2017 at 3:06
• @NickA alright I see now. – Ousmane D. Commented Mar 18, 2017 at 3:07
• @NickA sure, I see your updated ment. – Ousmane D. Commented Mar 18, 2017 at 3:08

4 Answers 4

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>

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.

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./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>

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>