count ticked check boxes

by andyjh07

HTML

<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>
<input type="checkbox" value="Yes"/>


<div id="trigger">Count 'em</div>
<div id="counter"></div>
<div id="message"></div>

CSS

#counter, #message { display: none; }
#trigger { cursor: pointer; }

JavaScript

$('#trigger').on('click', function(){
   
   // Count all of the checked boxes and then output the result
   var count = $("[type='checkbox']:checked").length;
   var fadespeed = 500;
   $('#counter').text('Amount of checked boxes = '+ count).fadeIn(fadespeed);
    
   // Now, depending on the results, display some stuff
    var message = $('#message');
    if(count >= 8){
        message.fadeIn(fadespeed).text('You have done really well');
    } else if (count >= 4) {
        message.fadeIn(fadespeed).text('You are sort of okay');
    } else {
        message.fadeIn(fadespeed).text('You are terrible, sorry.')   
    }
});