Check All Plugin V1

by LyndseyB

HTML

<fieldset>
    <form>  
        <p> What are your favourite colours? </p>
        <!-- Select All -->        
        <input type="checkbox" id="chk-selectAll" />
        <label for="chk-selectAll"> Select All </label>       
        
        <div class="mySelectGroup">
            <input type="checkbox" name="chk-colours" id="red" value="red" />
            <label for="red"> Red </label>
            <input type="checkbox" name="chk-colours" id="orange" value="orange" />
            <label for="orange"> Orange </label>
            <input type="checkbox" name="chk-colours" id="yellow" value="yellow" />
            <label for="yellow"> Yellow </label>
            <input type="checkbox" name="chk-colours" id="green" value="green" />
            <label for="green"> Green </label>
            <input type="checkbox" name="chk-colours" id="blue" value="blue" />
            <label for="blue"> Blue </label>
            <input type="checkbox" name="chk-colours" id="indigo" value="indigo" />
            <label for="indigo"> Indigo </label>
            <input type="checkbox" name="chk-colours" id="violet" value="violet" />
            <label for="violet"> Violet </label>
        </div>
        
        <div style="clear:both;"></div>
        <br />
        
        <p> Select your favourite animals... </p>
        <!-- Select All -->        
        <input type="checkbox" id="chk-selectAnimals" />
        <label for="chk-selectAnimals"> Select All </label>       
        
        <div class="mySelectAnimals">
            <input type="checkbox" name="chk-animals" id="cat" value="cat" />
            <label for="cat"> Cat </label>
            <input type="checkbox" name="chk-animals" id="dog" value="dog" />
            <label for="dog"> Dog </label>
            <input type="checkbox" name="chk-animals" id="horse" value="horse" />
            <label for="horse"> Horse </label>            
        </div>
        
    </form>
</fieldset>

CSS

fieldset { 
    border: 1px #000;
}

input, label { float:left; }
input { clear:left; }

JavaScript

(function($) {
    $.fn.selectAll = function( group ) {         
        //get our master checkbox
        var $master = this;
        //get our checkbox group
        var $chks = $( group );   
        //find checkboxes in group
        var $chkBoxes = $chks.find('input[type=checkbox]');     
        //get number of checkboxes in our group
        var $chkSize = $chkBoxes.length;         

        //on click of the selectAll checkbox...
        this.click(function() {   
           var $chStatus = this.checked;              
           
           //find checkboxes in our defined group and check/uncheck
           $chks.find('input').each(function() {
              $(this).prop('checked', $chStatus);               
           });           
        });        
        
        //on click of an individual checkbox in our group
        $chkBoxes.click(function() { 
            //number of checked checkboxes
            //var $chked = $( group ).find($chkBoxes + ':checked').length; 
            var $chked = $( group ).find(':checked').length;
            
            //uncheck Select all if child checkbox is unchecked
            $master.prop('checked', $chked === $chkSize ? true : false);
        });             
    };
}) ( jQuery );

$(function() {
    $('#chk-selectAll').selectAll('.mySelectGroup');
    $('#chk-selectAnimals').selectAll('.mySelectAnimals');
});