[jQuery] Changing the state of multiple checkboxes - looking for comments on this...
I'm trying to convince a supplier to adopt jQuery instead of using
their own (awful) javascript library and so I'm knocking some examples
based on the html pages they've already got.
One of the pages is your typical message list with a checkbox to
select messages individually and a checkbox in the header to select
them all, there's also delete and move buttons that get disabled based
on the state of the checkboxes.
I've knocked up the following example and it appears to work fine, but
I wondered as it's my first crack at using jQuery if anyone could
think of a nicer way of handling the code in the updateStates()
method?
$(document).ready(function(){
// Add event handler to checkbox in header to change the status of all
check boxes when it's clicked.
$(':checkbox[@id=checkall]').click(function(){
var checked = this.checked; // Save the state of the checkbox in
the header
$(':checkbox[@id!=checkall]').each(function(i){
this.checked = checked; // Apply it to the others in the list
});
updateStates();
});
// When a checkbox is checked or unckecked, change status of move and
delete buttons, and checkbox in header
$(':checkbox[@id!=checkall]').click(function(){
updateStates();
});
// Update the states of the buttons and the header checkbox when any
of the others change
function updateStates()
{
var allCheckboxes = $(':checkbox[@id!=checkall]'); // Create array
of all checkboxes expect the header one
var checkedCheckboxes = allCheckboxes.filter(':checked'); // Filter
array to be just those that are checked
if(allCheckboxes.length == checkedCheckboxes.length)
{
$(':checkbox[@id=checkall]').attr('checked', 'checked'); // all
boxes are checked, check header
}
else
{
$(':checkbox[@id=checkall]').removeAttr('checked'); // not all
boxes are checked, uncheck header
}
if(checkedCheckboxes.length == 0)
{
$('#btnMove').attr('disabled', 'disabled'); // No boxes are
checked, disable buttons
$('#btnDelete').attr('disabled', 'disabled');
}
else
{
$('#btnMove').removeAttr('disabled'); // Some boxes are
checked, enable buttons
$('#btnDelete').removeAttr('disabled');
}
}
});
Cheers
Andy