JQuery Check/Select all Checkboxes

Using JQuery, i will show how to:
– select all checkboxes in a page.
– select checkboxes within one block or selected area(table or div).
– check selective boxes within the block or page.(select boxes based on css class in block or page)

Here is the working example:

column1	column2
A B C D E	F G H I J

See this in separate page and view the source if you’d like.
Or
Here is the html for above example:

<table border="1">
 <tr>
  <th>column1</th>
  <th>column2</th>
</tr>
<tr>
 <td id="column1">
  <div><input type="checkbox" value="A" /> A</div>
  <div class="unread"><input type="checkbox"  value="B" /> B</div>
  <div><input type="checkbox"  value="C" /> C</div>
  <div class="unread"><input type="checkbox"  value="D" /> D</div>
  <div><input type="checkbox"  value="E" /> E</div>
 </td>
 <td id="column2">
  <div class="unread"><input type="checkbox"  value="F" /> F</div>
  <div><input type="checkbox" value="G" /> G</div>
  <div><input type="checkbox" value="H" /> H</div>
  <div class="unread"><input type="checkbox" value="I" /> I</div>
  <div><input type="checkbox" value="J" /> J</div>
 </td>
</tr>
</table>
<div><input type="checkbox" name="chkall" /> check All </div>
<div><input type="checkbox" name="c1all" /> check All from column1 </div>
<div><input type="checkbox" name="c2all" /> check All from column2</div>
<div><input type="checkbox" name="cbc" /> check All Bold text checkboxes</div>
<div><input type="checkbox" name="cbc1" /> check  Bold text checkboxes from column1</div>
<div><input type="checkbox" name="cbc2" /> check  Bold text checkboxes from column2</div>

Below is the code for “check all” checkboxes in whole page

$('input[name="chkall"]').click(function() {
  $(":checkbox").attr('checked', $(this).attr('checked'));
});

Below is the code for check all checkboxes from one block or selected area called “column1”

$('input[name="c1all"]').click(function() {
  $("#column1 :checkbox").attr('checked', $(this).attr('checked'));
});

Below is the code for check all checkboxes from one block or selected area called “column2”

$('input[name="c2all"]').click(function() {
  $("#column2 :checkbox").attr('checked', $(this).attr('checked'));
});

Below is the code for check selected checkboxes within a page (“check All Bold text checkboxes”)

$('input[name="cbc"]').click(function() {
  $(".unread :checkbox").attr('checked', $(this).attr('checked'));
});

Below is the code for check all selected checkboxes within a block (“check Bold text checkboxes from column1”)

$('input[name="cbc1"]').click(function() {
  $("#column1 .unread :checkbox").attr('checked', $(this).attr('checked'));
});

Below is the code for check all selected checkboxes within a block (“check Bold text checkboxes from column2”)

$('input[name="cbc2"]').click(function() {
  $("#column2 .unread :checkbox").attr('checked', $(this).attr('checked'));
});