On Jun 25, 2009, at 12:12 PM, evanbu...@gmail.com wrote:
I'm using this to check/uncheck a group of checkboxes which works
fine. However, when all of checkboxes are checked, I would like the
span id="CheckAll" to read "Uncheck All" and to toggle back to "Check
All" when all of the boxes are unchecked.
I am usually loathe to introduce complexities like the above since for
this rather trivial luxury, the code may have to loop through all
checkboxes each time the user checks/unchecks a box. Instead, two
separate buttons, one labelled "check all" and another "uncheck all",
rather than a toggle, might be a better idea?
To answer your question though, I have only a hint (for now): perhaps
something along the lines of the below (each time a checkbox is
checked or unchecked) might work:
var checkedcount = $("INPUT[type='checkbox'] :checked").length();
if( checkedcount == 0 )
{
.... toggle text to "check all" ...
}
else
{
var boxcount = $("INPUT[type='checkbox']").length();
if( boxcount == checkedcount )
{
... toggle text to "uncheck all" ...
}
}
A very simplistic approach (and the ":checked" above, as well as the
use of .length(), is just my guess on what the selector should be;
don't know off the top of my head without looking at some docs) which
I am certain can be improved upon or discarded for a better approach.
--ravi
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $
('#chkAll').is(':checked'));
});
});
</script>
<tr>
<td><input name="chkAll" id="chkAll" type="checkbox" Checked /></td>
<td class="style2"><em><strong><span id="CheckAll">Check All</span></
strong></em></td>
</tr>
Thanks
