フォームで使えるチェックボックスをすべて選択させるスクリプト[js]

Brian Cray's Blogより、フォームで使えるチェックボックスをすべて選択させるスクリプトの紹介です。

デモページはこちらから

fieldset要素にあるすべてのチェックボックスが対象です。

以下、設置例です。

HTML

<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>

jQuery

$(function () { // this line makes sure this code runs on page load
	$('#checkall').click(function () {
		$checkall = $(this); // set to variable for performance
		$close = $checkall.parents('fieldset:eq(0)').find('input'); // set to variable for performance
		$checkall.attr('checked') !== true ? $close.removeAttr('checked') : $close.attr('checked', 'checked');
	});
});