How do I uncheck checkbox when click

Question

I have check box and when "uncheck" checkbox is checked, all check box should be unchecked and "uncheck" checkbox should be checked.

This is what I tried so far

<input type="checkbox" name="" id="c1" class="checkbox nonCheck">  
<label for="c1"><span class="icon"></span>Uncheck</label>   

<input type="checkbox" name="" id="c2" class="checkbox">  
<label for="c2"><span class="icon"></span>value 1</label>   

<input type="checkbox" name="" id="c3" class="checkbox">  
<label for="c3"><span class="icon"></span>value 2</label>   



$(function(){
    $('.nonCheck').click(function(){
        $('input:checked').prop('checked',false).not('.nonCheck'); 
    }); 
})

But my code is not working. How do I change the code to fix it ? please help.

I think your "uncheck" field should probably be a button rather than a checkbox because it's an instantaneous event, rather than a toggle state. — Spudley, Nov 13 '18 at 12:46
Should be `$('input:checked').not('.nonCheck').prop('checked',false);` otherwise u apply it to all checkboxes — DarkBee, Nov 13 '18 at 12:47
Possible duplicate of [check / uncheck checkbox using jquery?](https://stackoverflow.com/questions/17420534/check-uncheck-checkbox-using-jquery) — Alive to die - Anant, Nov 13 '18 at 12:53

score 2 · Answer 1 · answered Nov 13 '18 at 13:06

You need to check on every click on "any" checkbox for "Uncheck" is checked or not.

let anyCheckbox = $(".checkbox");

anyCheckbox.on("click", function() {
 if($(".nonCheck").prop('checked'))
        anyCheckbox.not('.nonCheck').prop('checked', false);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="c1" class="checkbox nonCheck">
<label for="c1"><span class="icon"></span>Uncheck</label>

<input type="checkbox" name="" id="c2" class="checkbox">
<label for="c2"><span class="icon"></span>value 
 1</label>

<input type="checkbox" name="" id="c3" class="checkbox">
<label for="c3"><span class="icon"></span>value 2</label>

So whenever "Uncheck" is "checked" leave all other checkbox on false

score 1 · Accepted Answer · answered Nov 13 '18 at 12:51

Check this Code, I think this will help you

$(function(){
        $('.nonCheck').click(function(){
            $('input.checkbox:checked').prop('checked',false); 
        }); 
        $('.checkbox').click(function(){ 
         $('input.nonCheck:checked').prop('checked',false); 
        });
    })

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

<input type="checkbox" name="" id="c1" class="nonCheck">  
                        <label for="c1"><span class="icon"></span>Uncheck</label>   

                        <input type="checkbox" name="" id="c2" class="checkbox">  
                        <label for="c2"><span class="icon"></span>value 
 1</label>   

                        <input type="checkbox" name="" id="c3" class="checkbox">  
                        <label for="c3"><span class="icon"></span>value 2</label>

score 1 · Answer 3 · answered Nov 13 '18 at 12:52

I added an if statement if ($(this).prop('checked')) to check if the "all checkboxes" checkbox was checked.

Change the click to a change event because you can check checkboxes without a mouse too.

Moved the not() selector so it filters the objects before setting the property.

Added the last ; to your code because not using it is evil (though it doesn't brake code for most parsers)

$(function() {
  $('.nonCheck').on('change', function() {
    if ($(this).prop('checked')) {
      $('input:checked').not('.nonCheck').prop('checked', false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" id="c1" class="checkbox nonCheck">
<label for="c1"><span class="icon"></span>Uncheck</label>

<input type="checkbox" name="" id="c2" class="checkbox">
<label for="c2"><span class="icon"></span>value 
 1</label>

<input type="checkbox" name="" id="c3" class="checkbox">
<label for="c3"><span class="icon"></span>value 2</label>

score 0 · Answer 4 · answered Nov 13 '18 at 13:17

Check this Code, I added a function to the prop attribute in jquery selector.This code is working as per your logic.

$(function(){
    $('.nonCheck').change(function(){
          $("input:checkbox").prop("checked", function( i, val ) {
            return !val;
          });
    }); 
})

How do I uncheck checkbox when click

4 Answers4