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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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
|
1 2 3 4 5 |
$('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”
|
1 2 3 4 5 |
$('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”
|
1 2 3 4 5 |
$('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”)
|
1 2 3 4 5 |
$('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”)
|
1 2 3 4 5 |
$('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”)
|
1 2 3 4 5 |
$('input[name="cbc2"]').click(function() { $("#column2 .unread :checkbox").attr('checked', $(this).attr('checked')); }); |
For Further Reading:
About Author
Thanks for this, exactly what I needed, I shall now learn from it.
However, your forcing the table structure to something else than the usual way. Each checkbox should have it’s own td in the traditional tables.