check/uncheck all checkboxes

Question

I am trying to have a checkbox that checks/unchecks all the other checkboxes.

I am using this code:

$("#checkall").toggle(   
    function () {
        $(".kselItems").attr('checked', 'checked');
    },
    function () {
        $(".kselItems").removeAttr("checked"); 
});

This works fine, but for some reason, the checkbox with the id checkall (the one that should make every thing work) never stays checked.

How can this be fixed?

Answer 1

Keep it simple. Try this

$("#checkall").click(function() {
    $(".kselItems").attr('checked', this.checked);
});

Demo: http://jsfiddle.net/naveen/azkPR/

Answer 2

Try filtering out the checkbox in your selectors.

        $("#checkall").toggle(   
            function () {
                $(".kselItems:not(#checkall)").attr('checked', 'checked');
            },
            function () {
                $(".kselItems:not(#checkall)").removeAttr("checked"); 
        });

Answer 3

edit: while I writed, xeno06 answered too :)

when you click "checkall", it 1) set the value to checked, and then 2) call the toggle function, which will find "checkall", and toogle it back.

best way is to not put the ".kselItems" class to "checkAll" or, if "checkall" is inside ".ksleItems" use

$(".kselItems not(#checkall)").(...)

or

$(".kselItems").not("#checkall").(...)

for clarity I would use naveen solution

$("#checkall").click(function() {
    $(".kselItems :checkbox").not("#checkall").attr('checked', this.checked);
});

Answer 4

You can try with this

$("#checkall").click(function() {
   $(".kselItems").prop('checked', this.checked);
});