jQuery check uncheck all checkboxes

by Sreekesh S K

HTML

<form action="#">
    <p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
    
    <fieldset>
        <legend>Loads of checkboxes</legend>
        <p><input type="checkbox" data-accbalance="10"/> Option 1 - <span class="test">10</span></p> 
        <p><input type="checkbox" data-accbalance="20"/> Option 2 - <span class="test">20</span></p>
        <p><input type="checkbox" data-accbalance="30"/> Option 3 - <span class="test">30</span></p>
        <p><input type="checkbox" data-accbalance="40"/> Option 4 - <span class="test">40</span></p>
    </fieldset>
</form>

<span>Total:   </span><span id="total">0</span>

JavaScript

var tot = 0;
 $("input:checkbox").change(function(){
 
 if($(this).prop('checked')){
 tot = parseInt(tot)+parseInt($(this).data('accbalance'));
 } else{
 tot = parseInt(tot)-parseInt($(this).data('accbalance'));
 }
 $('#total').text(tot)
 })