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><input name="checkbox-1" id="checkbox-1" type="checkbox" class="checkitem" /></li> 
      <li><label>item-1</label><input name="checkbox-2" id="checkbox-2" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-3" id="checkbox-3" type="checkbox" class="checkitem"  /></li> 
      <li><label>item-1</label><input name="checkbox-4" id="checkbox-4" type="checkbox" class="checkitem"  /></li> 
    </ul>
    <input type="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:

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

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