Select All checkboxes using jQuery

Here is a simple way to do this :

Html :

<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>

jquery :

$(document).ready(function(){
$("#selectall").click(function(){
        if(this.checked){
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', true);
            })
        }else{
            $('.checkboxall').each(function(){
                $(".checkboxall").prop('checked', false);
            })
        }
    });
});

Use prop

$(".checkBoxClass").prop('checked', true);

or to uncheck:

$(".checkBoxClass").prop('checked', false);

http://jsfiddle.net/sVQwA/

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

Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/


Use below code..

        $('#globalCheckbox').click(function(){
            if($(this).prop("checked")) {
                $(".checkBox").prop("checked", true);
            } else {
                $(".checkBox").prop("checked", false);
            }                
        });


        $('.checkBox').click(function(){
            if($(".checkBox").length == $(".checkBox:checked").length) { 
                 //if the length is same then untick 
                $("#globalCheckbox").prop("checked", false);
            }else {
                //vise versa
                $("#globalCheckbox").prop("checked", true);            
            }
        });