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:

column1column2
A
B
C
D
E
F
G
H
I
J
check All
check All from column1
check All from column2
check All Bold text checkboxes
check Bold text checkboxes from column1
check Bold text checkboxes from column2

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'));
});


2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Close Bitnami banner