スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryでcheckboxを全選択・全解除

jQueryを使ってチェックボックスの全ての選択を設定したり、解除したりする方法です。
■HTML

<html>
<head><title>checkbox test</title></head>
<body>
<form>
<input id="all" type="checkbox"/>全選択<br/>
<br/>
<input name="chk" type="checkbox" value="1"/>値1<br/>
<input name="chk" type="checkbox" value="2"/>値2<br/>
<input name="chk" type="checkbox" value="3"/>値3<br/>
<br/>
<input id="send" type="submit" value="送信"/>
</from>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

オライリーのハイパフォーマンスWebサイトによれば、JavascriptはHTMLの下の方にある方が読み込みが早くなると書かれています。
また、jQueryはGoogleが提供しているものを利用しています。
■Javascript

jQuery(function(){
jQuery("#all").click(function(){
jQuery("input[type=checkbox][name=chk]").attr("checked", jQuery("#all").attr("checked"));
});

jQuery("#send").click(function(){
var cnt = jQuery("input[type=checkbox][name=chk]:checked").length;
if (0 == cnt) {
alert("少なくとも1つはチェックしてください");
return false;
}
});
});

Javascriptは、読み込み時にハンドラーの設定をしています。
HTMLをなるべく汚さない書き方が私は好きですね。
チェックボックスを押された時に選択、非選択をコントロールしています。
また、送信ボタンが押された時に、選択が無い場合は警告を表示して、送信処理を中止しています。

一行入魂サイトにまとめがあります。
スポンサーサイト

Tag : jQuery

COMMENTS

COMMENT FORM

TRACKBACK


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。