Wednesday, 18 September 2013

Select/Deselect multiple check boxes using jQuery

HTML Code : 

<div><input id="chkAll" type="checkbox"/>Check all Boxes</div><br />
<table id="tblBoxes">
      <tr><td><input id="Checkbox1" type="checkbox" class="chkA"/></td><td>Check box - 1</td></tr>
      <tr><td><input id="Checkbox2" type="checkbox" class="chkA"/></td><td>Check box - 2</td></tr>
      <tr><td><input id="Checkbox3" type="checkbox" class="chkA"/></td><td>Check box - 3</td></tr>
      <tr><td><input id="Checkbox4" type="checkbox" class="chkA"/></td><td>Check box - 4</td></tr>
      <tr><td><input id="Checkbox5" type="checkbox" class="chkA"/></td><td>Check box - 5</td></tr>
</table>

Script Code : 

 $(document).ready(function () { 
     $("#chkAll").click(function(event) {
         if($('#chkAll').prop('checked'))
             $('.chkA').prop('checked', true);
         else
             $('.chkA').prop('checked', false);       
     });
     

 });


Check for online Demo 

note : add required jQuery files.

No comments:

Post a Comment