http://briancray.com/tests/checkboxes/index.html
The ways to implement select all is simple, but not perfect. The select all and unselect all works fine, but when under select all state, if you uncheck one the select all is also checked. How can this be corrected?
then
"Check all" is still checked. How can this be corrected?
Warning, shameless self-promotion ahead.
I've written a plugin for jQuery that does exactly this sort of thing. Have a look: http://mjball.github.com/jQuery-CheckAll
To use it with the markup on the page you linked:
<form action="#" method="post" id="myform">
<fieldset>
<div class="radio"><input type="checkbox" name="checkall" id="checkall"> <label for="checkall">Check all</label></div>
<div class="radio"><input type="checkbox" name="checkbox1" id="checkbox1"> <label for="checkbox1">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox2" id="checkbox2"> <label for="checkbox2">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox3" id="checkbox3"> <label for="checkbox3">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox4" id="checkbox4"> <label for="checkbox4">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox5" id="checkbox5"> <label for="checkbox5">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox6" id="checkbox6"> <label for="checkbox6">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox7" id="checkbox7"> <label for="checkbox7">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox8" id="checkbox8"> <label for="checkbox8">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox9" id="checkbox9"> <label for="checkbox9">Checkbox</label></div>
<div class="radio"><input type="checkbox" name="checkbox10" id="checkbox10"> <label for="checkbox10">Checkbox</label></div>
</fieldset>
</form>
This will suffice:
$('#checkall').checkAll('#myform input:checkbox:not(#checkall)');
Demo: http://jsfiddle.net/mattball/npeTz/
CheckAll works correctly with jQuery 1.4.4 and 1.5.2. I have not had time to update it for jQuery 1.6. sorry.
Updated for jQuery 1.6 compatibility: http://jsfiddle.net/mattball/CVQsp/
It still works even if you accidentally select the master along with the slaves: http://jsfiddle.net/mattball/BwFvc/
Here's my take on it.
var checkall = $('#checkall');
var boxes = $('input[type="checkbox"]').not(checkall);
checkall.click(function () {
boxes.attr('checked', this.checked);
});
boxes.change(function() {
checkall[0].checked = this.checked && boxes.filter(':checked').length === boxes.length;
});
This way the checkall gets checked even if you manually check all the sub boxes.
checkall[0] grabs the DOM element out of the jQuery object and sets its .checked property. It is set to true if this.checked is true (this` being the element that received the event) and if the number of checked boxes is equal to the total number of boxes. And no, you'd need boxes.attr('checked', this.checked);. When the checkall element is clicked, if its .checked property is true, then the checked property of all the boxes will be set to true, likewise if false.
You need to handle the state change of the child checkboxes too. Try this:
<script type="text/javascript">
$(function () {
$('#checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});
//THIS IS NEW ADDITION TO YOUR CODE
$('input[id^="checkbox"]').click(function(){
if(!this.checked){
$('#checkall').attr("checked", false)
}
});
});
</script>
Ok, there are similar answers already. I'm gonna post this anyway since I spent some time making it work and learning something new. Doesn't work with v1.6
http://jsfiddle.net/gsndd/
$(function() {
// Ripped from https://github.com/mjball/jQuery-CheckAll @Matt Ball
var propFn = typeof $.fn.prop === 'function' ? 'prop' : 'attr';
$('#checkall').click(function() {
$(this).parents('fieldset:eq(0)').find(':checkbox')[propFn]('checked', this.checked);
});
$("input[type=checkbox]:not(#checkall)").click(function() {
if (!this.checked) {
$("#checkall")[propFn]('checked', this.checked);
} else {
$("#checkall")[propFn]('checked', !$("input[type=checkbox]:not(#checkall)").filter(':not(:checked)').length);
}
});
});
EDIT: To make the same work with v1.6+, just change the attr to prop. Ultimately, you are better off using something that works with both.
Edit - Fixed the code to work on any version(assuming John won't come up with v1.7 and say, 'surprise'). Thanks to @Matt Ball
prop is a function and if it is then it stores prop in the variable propFn. It stores attr otherwise. Since prop is available starting v1.6 only, this will pick up the correct method depending on what is available in the jQuery library. @Matt Ball can correct me if I'm wrong.