I have a table with a column full of checkboxes. At the top I would like to have a single "Select All" checkbox that would check all the checkboxes on that page.
How should I implement this? I'm using jQuery as my JavaScript framework if it matters.
+1
A:
jquery (EDITED to toggle check/uncheck all):
$(document).ready(function() {
$("#toggleAll").click(function() {
if ($(this).attr("checked")) {
$("#chex :checkbox").attr("checked", true);
} else {
$("#chex :checkbox").attr("checked", false);
}
});
});
The reason why I had to do a click() then an if statement to check for checked status is because if you try to "toggle" a checkbox, the checkbox being toggled will not retain its checked status. This way it retains the check status and effectively toggles.
HTML:
<input type="checkbox" id="toggleAll" />
<div id="chex">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
Jason
2009-07-31 17:46:06
Those look like ASP.NET checkboxes, not ASP.NET-MVC. MVC would just use regular html checkboxes. How does that change things?
KingNestor
2009-07-31 18:04:58
With this solution, if the user unchecks the 'select all' check box, the boxes stay checked. See my answer below for the jQuery to handle selecting AND deselecting all boxes.
idrumgood
2009-07-31 18:15:47
@kingnestor - it won't change anything. use your standard checkboxes and this will work.
Jason
2009-07-31 19:10:16
edited to unselect all
Jason
2009-07-31 19:13:01
You should create an example based on table markup where the select all checkbox is present in header row. Current example markup is totally different from what is listed in the question.
SolutionYogi
2009-07-31 19:24:01
Also, you are using 'paragraph' for toggling whereas the OP wants a checkbox to toggle the state.
SolutionYogi
2009-07-31 19:24:49
ah, so he is. i will fix.
Jason
2009-07-31 19:39:20
A:
KingNestor:
You are also going to need this link (if you haven't already discovered it):
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysLists...
Robert Harvey
2009-07-31 18:00:00
A:
While the answers posted previously will work, you'll run into issues if you have more than one set of checkboxes in a single page.
This format will work regardless:
<table>
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Tabular Data 1</td>
<td>Tabular Data 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Tabular Data 3</td>
<td>Tabular Data 4</td>
</tr>
</tbody>
</table>
and the script...
$(function() {
$('th > :checkbox').click(function() {
$(this).closest('table')
.find('td > :checkbox')
.attr('checked', $(this).is(':checked'));
});
});
Marve
2009-07-31 18:56:55
that is way more jquery than is needed. mine will work regardless of format so long as the proper selectors are added
Jason
2009-07-31 19:20:30
@Jason: I certainly agree the same effect can be accomplished with less code but regardless, the method shown in my answer will allow multiple sets of checkboxes to exist in a single page.
Marve
2009-07-31 19:54:37
A:
SolutionYogi
2009-07-31 19:05:29
+2
A:
This will keep all the individual checkboxes the same as the "check all" one
$("#id-of-checkall-checkbox").click(function() {
$(".class-on-my-checkboxes").attr('checked', this.checked);
});
This will keep the "check all" one in sync with whether or not the individual checkboxes are actually all checked or not
$(".class-on-my-checkboxes").click(function() {
if (!this.checked) {
$("#id-of-checkall-checkbox").attr('checked', false);
}
else if ($(".class-on-my-checkboxes").length == $(".class-on-my-checkboxes:checked").length) {
$("#id-of-checkall-checkbox").attr('checked', true);
}
});
jayrdub
2009-08-01 06:49:57