Check All Plugin V2

Different route applied.

by LyndseyB

HTML

<fieldset>
    <form>  
        <p> What are your favourite colours? </p>
        <!-- Select All -->        
        <!--<input type="checkbox" id="chk-selectAll" data-target="chk-colours" class="selectAll" />       
        <label for="chk-selectAll"> Select All </label>  -->  
         <a href="#" data-target="chk-colours" class="selectAll2"> Select All </a>
    
        <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 style="clear:both;"></div>
        <br />
        
        <p> Select your favourite animals...  <span id="chk-animals-count"></span></p>
        <!-- Select All -->        
        <input type="checkbox" id="chk-selectAnimals" class="selectAll" data-target="chk-animals" />
        <label for="chk-selectAnimals"> Select All </label>     
        
        <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>           
    </form>
</fieldset>

CSS

fieldset { 
    border:none;
}

a { float:left; }

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

div[class*='_count'] { float:left; color:blue; padding-left:10px; }

div[class*='_count']:before { content: " ("; }
div[class*='_count']:after { content: ") "; }

JavaScript

(function($) {
    $.fn.selectAll = function( options ) {     
        
        //default settings
        var settings = {   
            showCounts: false //false by default
        };
          
        //define options      
        var options = $.extend({}, settings, options);        
        var master = this;
        var masterClass = $(this).attr("class");
        var show=0;
        
        //get element type
        this.each(function() {            
            if( this.nodeName !== 'INPUT' ) {              
                //create hidden form element to handle select-all
                var hiddenEl = $('<input type="hidden" id="'+ $(this).data('target') +'_hidden" value="false" />');    
                hiddenEl.insertAfter(this);                
            } else {
                var chStatus = this.checked;   
            }     
        });
        
        if(options.showCounts) {   
            show = 1;
            $('.'+masterClass).each(function() {                               
                var countDiv = $('<div class="'+$(this).data('target')+'_count" />');
                $(this).next().after(countDiv);        
                countDiv.html('<span>0</span> of '+  $('input[name='+ $(this).attr("data-target") +']').length +' selected');
            });             
        };   
        
        //go
        this.click(function() {                
            var group = $(this).data('target');    
            //if not checkbox
            if( $('#'+ group +'_hidden').length > 0) {                  
               var chStatus = ($('#'+ group +'_hidden').val() == 'false') ? true : false; 
               $('#'+ group +'_hidden').val(chStatus);           
               var selHTML = ( $('#'+ group +'_hidden').val() == 'false') ? 'Select All' : 'Select None';
               $(this).html( selHTML );
            } else {
               var chStatus = this.checked;                               
            }
            
            var...