Check/uncheck All The Checkboxes In Jquery

I have not enough knowledge about jQuery,I need one more checkbox by the name 'select all'. When I select this checkbox all checkboxes in the HTML page must be selected. How can I

Solution 1:

<ul><li><label>item-1</label><inputname="checkbox-1"id="checkbox-1"type="checkbox"class="checkitem" /></li><li><label>item-1</label><inputname="checkbox-2"id="checkbox-2"type="checkbox"class="checkitem"  /></li><li><label>item-1</label><inputname="checkbox-3"id="checkbox-3"type="checkbox"class="checkitem"  /></li><li><label>item-1</label><inputname="checkbox-4"id="checkbox-4"type="checkbox"class="checkitem"  /></li></ul><inputtype="checkbox"name="select-all"id="select-all" /> Check all

    <script>
    $(document).ready(function() {
        $('#select-all').click(function(event) {  
            if(this.checked) { 
                $('.checkitem').each(function() { 
                    this.checked = true;     
                });
            }else{
                $('.checkitem').each(function() {
                    this.checked = false; 
                });        
            }
        });

    });
    </script>

http://jsfiddle.net/9o3f01e0/

Solution 2:

Try something like this.

$('#select-all').click(function(event) {
   var checked = this.checked; 
   $("input[type=checkbox]").each(function(){
     $(this).prop('checked', checked);
   });
});

Solution 3:

[Here is the fiddle i made][1]

Add script at the bottom of page

[1]: http://jsfiddle.net/zbjc0fpe/1/

Solution 4:

Just for grins and giggles...the other answers work find, but I like the concise-ness and re-usability of the following method...so just in case this helps anyone:

$(document).on('click','[data-toggle=checkAll]', function() {
    var $all     = $(this),
        $targets = $( $all.data('target') )
    ;
    $targets.prop('checked', $all.is(':checked') );
}

Using the above script, you can have as many "checkAll" checkboxes on the page as you want...each "check all" checkbox just needs to specify a different target selector:

<inputtype='checkbox' data-toggle='checkAll' data-target='.check-option' /> check all
<inputtype='checkbox'class='check-option' value='1' /> option 1
<inputtype='checkbox'class='check-option' value='2' /> option 2

<inputtype='checkbox' data-toggle='checkAll' data-target='.check-option2' /> check all2
<inputtype='checkbox'class='check-option2' value='1' /> option 1
<inputtype='checkbox'class='check-option2' value='2' /> option 2