jQueryのススメ Vol.03 "ちょっと親切なフォーム その1"
デザイナーズコラム第七弾
WEBSASを支えるデザイン担当者がお届けする連載コラム。 第七弾は、「jQueryのススメ Vol.03 "ちょっと親切なフォーム その1」。
WEBSAS デザイナー
あったら"ちょっと親切"なフォームの小技。
今回はよく見かける「チェックボックスの一括選択、解除」を作ってみましょう。
HTML
<div id="trget-chk">
<label><input type="checkbox" id="inlineCheckbox1" value="option1"> デザイン</label>
<label><input type="checkbox" id="inlineCheckbox2" value="option2"> html</label>
<label><input type="checkbox" id="inlineCheckbox3" value="option3"> JavaScript</label>
<label><input type="checkbox" id="inlineCheckbox4" value="option4" > jQuery</label>
<label><input type="checkbox" id="inlineCheckbox5" value="option5"> 今日のおやつ</label>
<input id="trg-chk" name="" type="button" value="すべて選択する" />
</div>
これからこのHTMLをもとに
「すべてを選択する」ボタンをクリックすると、すべてのチェックボックスがチェックされるスクリプトを作ります。
まずは下ごしらえ。
「すべてを選択する」ボタンに「trg-chk」を
対象のチェックボックスのカタマリに「trget-chk」というIDをつけました。
この2つがキーとなります。
JavaScript
$(function() {
$("#trg-chk").click(function() {
$("#trget-chk").find("input:checkbox").prop("checked", true);
});
});
1行目
jQueryの命令が始まりますよ！
2行目
「#trg-chk」がクリックされた時
3行目
「#trget-chk」の中から「インプット、かつチェックボックスのものをみつけて」「チェック属性をオンにします」
動かしてみましょう。
できました。
沢山選択肢がある場合に楽になりますね。
ではこれをさらにリッチに改造します。
今度は、チェック解除機能を追加して、クリック後にボタンのテキストも変えてみます。
JavaScript
$(function() {
$("#trg-chk").click(function() {
var txt01 = $(this).val();
var chk01 = $("#trget-chk").find("input:checkbox");
if (txt01 == "すべて選択する") {
chk01.prop("checked", true);
$(this).val("選択を解除する");
} else {
chk01.prop("checked", false);
$(this).val("すべて選択する");
}
});
});
3行目
ボタンのテキストを取得して「txt01」とします
4行目
「#trget-chk」の中から「インプット、かつチェックボックスのもの」をみつけて「chk01」としま
す5行目
もし「txt01」が「選択を解除する」だったら
6行目
「chk01」のチェック属性をオンにします（※）
7行目
「txt01」のテキストを「選択を解除する」に変えて表示します
8行目
もし「txt01」が「選択を解除する」ではなかったら
9行目
「chk01」のチェック属性をオフにします（※）
10行目
「txt01」のテキストを「選択を解除する」に変えて表示します
もう一度動かしてみましょう。
さっきとやっていることはほとんど同じ。
大きく変わったのは「var」から始まる何やらと「もし」という条件がついたことです。
varは変数と言い、値をしまっておく箱のようなものです。
("#trget-chk").find("input[type='checkbox']");
なんて何回も書くのが嫌なので、ここでまとめました。
ちなみに、これを変数にしなかった場合、書かれるたびに「「#trget-chk」の中から「インプット、かつチェックボックスのもの」を探す」という処理がされるので、長いhtmlだと負担がかかります。
2回以上出てくるようだったら変数に格納してしまいましょう。
「もし…だったら」のお作法は以下の通り。
たくさん条件がある場合でも「else if」でつないで書くことができます。
今回は「(2)条件に一致した、または一致しなかった時」を使っています。
(1)条件に一致した時
if ( 条件 ){
一致した時の処理内容
}
(2)条件に一致した、または一致しなかった時
if ( 条件 ){
一致した時の処理内容
}else{
一致しなかった時の処理内容
}
(3)条件が複数ある時
if ( 条件1 ){
条件1に一致した時の処理内容
}else if ( 条件2 ){
条件2に一致した時の処理内容
}else if ( 条件 3 ){
条件3に一致した時の処理内容
}else{
どれにも一致しなかった時の処理内容
}
案外簡単ですね。
カスタマイズは無限大！
ほんの少しの工夫でうんと使い勝手の良いサイトになりますよ。
- ※ .prop() はjQuery 1.6より採用されたメソッドです。
