Main blog index
August 6th, 2009
18 comments
jquery

Easiest “check all” ever with jQuery

How does it work?

This code checks/unchecks all checkboxes within the same fieldset. Simple and semantic.

Example completed code

See this in action and view the source if you’d like.

HTML Setup

Add checkboxes however you like, just make sure they are within the same fieldset.

1
2
3
4
5
6
7
8
9
10
11
12
13

<fieldset>
	// these will be affected by check all
	<div><input type="checkbox" id="checkall"> Check all</div>
	<div><input type="checkbox"> Checkbox</div>
	<div><input type="checkbox"> Checkbox</div>
	<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
	// these won't be affected by check all; different fieldset
	<div><input type="checkbox"> Checkbox</div>
	<div><input type="checkbox"> Checkbox</div>
	<div><input type="checkbox"> Checkbox</div>
</fieldset>

The “check all” jQuery

I must say this is genius… and fast! I spent a lot of time tweaking this code for performance and brevity. Enjoy!!

Updated: Thanks to comments from k3n and Nate I was able to streamline the original code even more! K3n’s code in particular was genius*2.

1
2
3
4
5

$(function () { // this line makes sure this code runs on page load
	$('#checkall').click(function () {
		$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
	});
});

Show/add comments (18)

1009