CODEWITHSUNDEEP
javascriptjquerycheckbox
Brian.hlbdg
Brian.hlbdg

Reputation: 35

Can't get clear all checked boxes in Jquery

I have tried this a few different ways but can't get code to uncheck or clear all check boxes after all boxes have been selected. Latest code looks like... 

$(".select_all").click(function(){
    var state = ($(this).html() == "Select All") ? true : false;    
    $(this).html((state) ? "Clear" : "Select All");

    if ($(':checked').prop('checked', false)) {
        $(':checkbox').each(function() {
         this.checked = true;                      
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                      
        });                                      
    };                                           
})

Upvotes: 1

Views: 77

Answers (3)

Barmar
Barmar

Reputation: 782717

$(':checked').prop('checked', false) sets the property to false on every checked box. It doesn't return true/false, so it can't be used as the condition in if. If you want to test whether there are no checked boxes, use:

if ($(':checked').length == 0)

Then to check all the boxes, you can do:

$(':checkbox').prop('checked', true);

But there isn't really any need to do this check at all; you already determined whether it's select all or clear in the state variable at the top of the function.

You don't need to use .each() -- all the jQuery functions that modify the DOM loop automatically when the selector matches multiple elements.

And it's rarely necessary to use ? true : false in a ternary -- you can simply use the expression before that as the boolean value.

So the full code is:

$(".select_all").click(function(){
    var state = $(this).text() == "Select All";    
    $(this).text(state ? "Clear" : "Select All");
    $(':checkbox').prop('checked', !state);                               
});

Upvotes: 0

Igor Adamenko
Igor Adamenko

Reputation: 878

If I've undestood right, you need something like this. Check the snippet below or this JSFiddle.

$(".select_all").click(function(){
  var state = $(this).html() == "Select All";
  $(this).html((state) ? "Clear" : "Select All");

  $('input:checkbox').prop('checked', state);        
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">

<a href="#" class="select_all">Select All</a>

Upvotes: 3

gaetanoM
gaetanoM

Reputation: 42054

According to the possible HTML, the select_all element could be a checkbox or a button or other. I assumed you are in one of the first two possibilities.

$(function () {
  $(".select_all").click(function(e){
    e.preventDefault();
    var state = ( $(this).html() == "Select All") ? true : false;
    $(this).html((state) ? "Clear" : "Select All");
    $(':checkbox').prop('checked', state);
  });
  
  $(".select_all1").click(function(e){
    var state = ( this.nextSibling.textContent == "Select All") ? true : false;
    $(':checkbox').prop('checked', state);
    this.nextSibling.textContent = (state) ? "Clear" : "Select All";
  });
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<form action="demo.asp">
    <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car"> I have a car<br>
    <input type="checkbox" name="vehicle" value="Truck"> I have a car<br>
    <input type="checkbox" class="select_all1" name="selectAll" value="selectAll">Select All<br>
    <input type="submit" value="Submit">
    <button class="select_all">Select All</button>
</form>

Upvotes: 0

Related Questions