Jquery “select all” checkbox

Question

I am trying to select all checkboxes on a page once the 'select all' checkbox is clicked and i am using jquery for this as you can see at the below link:

http://jsfiddle.net/priyam/K9P8A/

The code to select and unselect all checkbox is:

function selectAll() {
    $('.selectedId').attr('checked', isChecked('selectall'));
}

function isChecked(checkboxId) {
    var id = '#' + checkboxId;
    return $(id).is(":checked");
}

After being stuck with it for a day, I am still not sure why I cant get it to work. Please help

Answer 1

Why don't you do it this way? It is more clear and readable

$('#selectall').click(function () {
    $('.selectedId').prop('checked', this.checked);
});

$('.selectedId').change(function () {
    var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
    $('#selectall').prop("checked", check);
});

DEMO

Answer 2

Your fiddle works after I made 3 fixes :

• import of jQuery (top left menu)
• addition of the missing isChecked function
• use of prop instead of attr to check the boxes

Answer 3

It is because the method selectAll is not avaible in the global scope.

In the second dropdown in the left panel Frameworks and Extensions , select no -wrap head/body it will work fine.

The reason being by default onload is selected and when onload is selected all the entered script is wrapped inside a anonymous function as given below. It will make the selectAll function a local method inside the anonymous function, thus your onclick event handler which uses global scope will not get access to the method causing an Uncaught ReferenceError: selectAll is not defined error.

$(window).load(function(){
    //Entered script
});

Demo: Fiddle

Update But you can simplify it as

$(function(){
    $('#selectall').click(function(i, v){
        $('.selectedId').prop('checked', this.checked);
    });

    var checkCount = $('.selectedId').length;
    $('.selectedId').click(function(i, v){
        $('#selectall').prop('checked',$('.selectedId:checked').length  == checkCount)
    });
});

and remove all the onclick handlers from input elements as shown in this demo

Answer 4

Use this...

$('#selectall').on('click', function() {
    $('.selectedId').attr('checked', $(this).is(":checked"));
});

An see this DEMO

Answer 5

$(document).ready(function () {
    $('#selectall').click(function () {
        $('.selectedId').prop('checked', $(this).is(":checked"));
    });
});

more Optimized

Answer 6

This should do the trick for you.

$(document).ready(function () {
    $('#selectall').click(function () {
         var checked = $(this).is(':checked');            
        $('.selectedId').each(function () {
            var checkBox = $(this);               
            if (checked) {
                checkBox.prop('checked', true);                
            }
            else {
                checkBox.prop('checked', false);                
            }
        });

    });
});

JsFiddle http://jsfiddle.net/Ra3uL/

Answer 7

Assume parent checkbox has a class of mainselect and all child have class of childselect

Then selecting parent will select all checkbox and vice-versa with the code below:

$('#mainselect').live('change',function(){
if($(this).attr('checked') == 'checked') {
    $('.childselect').attr('checked','checked');
} else {
    $('.childselect').removeAttr('checked');
}
});

Answer 8

$(function(){

// add multiple select / deselect functionality
$("#selectall").click(function () {
      $('.case').attr('checked', this.checked);
});

// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){

    if($(".case").length == $(".case:checked").length) {
        $("#selectall").attr("checked", "checked");
    } else {
        $("#selectall").removeAttr("checked");
    }

});

});

Answer 9

A small enhancement to @letiagoalves solution, if your checkboxes have specific processing associated with a click event. Not asked for by the OP, but something I've had to do in the past. Basically, instead of directly setting the checked property of each dependent checkbox, it compares the checked state of each dependent checkbox to the selectall checkbox, and triggers a click event on those that are in the opposite state.

$('#selectall').click(function () {
    var parentState = $(this).prop('checked');
    $('.selectedId').each(function() {
        if ($(this).prop('checked') !== parentState) {
            $(this).trigger("click");
        }
});
});

DEMO: https://jsfiddle.net/jajntuqb/2/

Answer 10

You can simply add the handle function to the click event on the select all checkbox:

$('#chk-all-items').click(selectAll);

And then this function should be enough to select all or unselect all.

selectAll = function (event) {
        var self = this;
        $('.template-item-select').each(function () {
            this.checked = self.checked;
        });
    }

Answer 11

More specific solution:

 $(document).ready(function(){ $('#checkAll').on('click', function ( e ) { $('input[name="chck_box[]"]').prop('checked', $(this).is(':checked')); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <th><input type="checkbox" id="checkAll"></th> <th>Name</th> <th>Last</th> </thead> <tbody> <tr> <td><input type="checkbox" name="chck_box[]" value="1"></td> <td>Joe</td> <td>Doe</td> </tr> <tr> <td><input type="checkbox" name="chck_box[]" value="2"></td> <td>John</td> <td>Smith</td> </tr> <tr> <td><input type="checkbox" name="chck_box[]" value="3"></td> <td>Bill</td> <td>White</td> </tr> </tbody> </table>