チェックボックスの一括チェック、一括解除をチェックボックスで操作する方法

この前も書いたんですが、jQueryの方がかなーーりすっきりするのでこっちで。
それになんかjQueryで書くと直感的でわかりやすいなぁ。。って思うのはうちがデザイナーかぶれやからなんかな。

jQueryで実装してみる

<script type="text/javascript">

//全選択チェックボックス用処理
function allCheck() {
	if ($("#allcheck").is(":checked")) {
		$(".onecheck").attr("checked", true);
	} else {
		$(".onecheck").attr("checked", false);
	}
}

//個別選択チェックボックス用処理
function oneCheck() {
	var count = $(".onecheck").length;

	for (var i=0; i<count; i++) {
		if (!$(".onecheck").eq(i).is(":checked")) {
			$("#allcheck").attr("checked", false);
			return;
		}
	}
	$("#allcheck").attr("checked", true);
}
</script>

<form action="" method="post" name="form1">
	<input id="allcheck" type="checkbox" name="" onclick="allCheck();">全選択<br>
	<input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック1<br>
	<input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック2<br>
	<input class="onecheck" type="checkbox" name="" onclick="oneCheck();">チェック3
</form>

比較用に以前のコードも

普通にjavascriptのコード。

<script type="text/javascript">
//一括チェック用チェックボックス
function allcheck() {
	var count = document.form1.chk.length;
	var allcheck = document.form1.chk_all.checked;

	for ( var i=0; i<count; i++) {
		var check = document.form1.chk[i].checked;

		if (allcheck == true) {
			document.form1.chk[i].checked = true;
		} else {
			document.form1.chk[i].checked = false;
		}
	}
}

//個別チェック用チェックボックス
function check(onjCheck) {
	if (onjCheck.checked == false) {
		document.form1.chk_all.checked = false;
		return;
	}

	var count = document.form1.chk.length;
	for (var i=0; i<count; i++) {
		if (document.form1.name != "chk_all" && document.form1.chk[i].checked == false) {
			return;
		}
	}
	document.form1.chk_all.checked = true;
}
</script>

<form action="" method="post" name="form1">
	<input type="checkbox" name="chk_all" onclick="allcheck();">全選択<br>
	<input type="checkbox" name="chk" onclick="check(this);">チェック1<br>
	<input type="checkbox" name="chk" onclick="check(this);">チェック2<br>
	<input type="checkbox" name="chk" onclick="check(this);">チェック3
</form>