もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）

第15回　チェックする項目の選択・未選択を画像でわかりやすくする

2010年2月2日

長谷川広武, 徳田和規

JavaScript, jQuery, Web制作, Webデザイン

プラグイン, HTML, クリック, スクリプト

チェック項目を選択・未選択のエリアにわける

前回はテキストボックスに入力したパスワードを見えるようにする方法をご紹介しました。

今回ご紹介するのは，チェックボックスをもっと視覚的にわかりやすいようにする方法をご紹介します。選択・未選択をそれぞれの表示域にわける方法です。

選択・未選択の表示域を分ける

仕組みを考える

今回は仕組みから考えてみましょう。

選択・未選択エリアに同じ数のリストをそれぞれ用意
最初に表示させるもの以外を非表示に
クリックをしたら，その要素は非表示にし，同じリスト位置(○番目)の要素を表示させる
選択エリアに入れる場合は同じ位置(○番目)のチェックボックスをチェック状態に，未選択位置に入れる場合はその逆をチェック状態にする

順を追って見ていくことにしましょう。

まずはHTMLを設定します。選択・未選択部分はリストにし，表示は画像で行うことにします。また，フォームの一部ということを想定して，input群だけを入れておくことにします。

使用するHTML

今回のサンプルでは，あらかじめ一つだけはチェック状態にしているところのから作成してみることにします。

HTML

<ul class="add">
<li class="off"><img src="images/A1.png" width="108" height="43" alt="選択A" /></li>
<li class="on"><img src="images/B1.png" width="108" height="43" alt="選択B" /></li>
<li class="on"><img src="images/C1.png" width="108" height="43" alt="選択C" /></li>
<li class="on"><img src="images/D1.png" width="108" height="43" alt="選択D" /></li>
<li class="on"><img src="images/E1.png" width="108" height="43" alt="選択E" /></li>
</ul>

<ul class="delete">
<li class="on"><img src="images/A2.png" width="108" height="43" alt="選択A" /></li>
<li class="off"><img src="images/B2.png" width="108" height="43" alt="選択B" /></li>
<li class="off"><img src="images/C2.png" width="108" height="43" alt="選択C" /></li>
<li class="off"><img src="images/D2.png" width="108" height="43" alt="選択D" /></li>
<li class="off"><img src="images/E2.png" width="108" height="43" alt="選択E" /></li>
</ul>

<input type="checkbox" name="test" value="選択A" checked="checked" />
<input type="checkbox" name="test" value="選択B" />
<input type="checkbox" name="test" value="選択C" />
<input type="checkbox" name="test" value="選択D" />
<input type="checkbox" name="test" value="選択E" />

HTMLを見てもらうとわかると思うのですが，各リストに「on」もしくは「off」のclassをつけています。これはかなり面倒な方法ではありますが，最初に表示させるしないを，わかりやすくするために，HTMLであらかじめ振り分けています。

HTMLをよりシンプルにして作成するのであれば，リスト群のどちらか一方で，振り分けとなるonもしくはoffのどちらかだけをつけて，それを元に他のをスクリプト側で自動でoffなどをつけるほうが効率的ではあります。

今回は，まず最初はあえてその部分はスクリプト側に入れず，HTML側に入れておいて作成することにしました。

実際のサイト制作においてでは，利用する部分が多いようであれば，スクリプト側で自動で振り分けをすべきですが，今回のように，一部でしか利用せず，しかも項目数も少ないような場合，HTML側であらかじめ入れておいても作業量はそれほど変わらないので，まずは手動でHTMLにclassをつけました。

また，「off」部分とinputタグ部分を表示させなくする方法も，CSS側で行ってしまうことにします。

CSS

ul li.off , input{
    display:none;
}

これで，現状はHTMLとCSSだけで，表示させてたい部分だけが表示されている状態になります。

スクリプトを考える

続いて次はスクリプトです。先日，jQueryの最新版1.4がリリースされましたので，せっかくなので，今回はその最新版のjQuery1.4を利用してスクリプトを書いていくことにします。

まずは，表示されている部分をクリックしたら動作するようにするようにします。

Script

jQuery(function($){
    $('li','ul').click(function(){
        ○○・・・
    });
});

続いてクリックした要素が，リストの何番目なのかを変数に入れておきます。

.index()

var num = $(this).index();

1.4から.index()のメソッドが使い安くなっており，上記のようなスクリプトで，クリックした位置を確認できます。

次は，クリックした領域ではない方に要素を表示するスクリプトです。同じ位置の要素を表示させるには，下のスクリプトようにします。

$(this).parent().siblings('ul').children().eq(num).show()

このままだとわかりづらいですが，日本語になおしてみると「これ（リスト）の親要素と同階層にあるリスト群の子要素のうちのnum番目の要素を表示させる。」となります。

これにプラスして，クリックした要素を費用時にする必要があるのと，それぞれ「on」と「off」のclassを変更するスクリプトも加えます。それらを加えると，先ほどの一行はさらに長くなりますが，下のようになります。

$(this).hide().attr('class','off').parent().siblings('ul').children().eq(num).show().attr('class','on');

あと残りは，選択エリアに入った際のチェックボックスの挙動です。選択エリアに入れた際の同じ位置のinputにchecked属性をつけるようにします。

$('input').eq(num).attr('checked',function(){
     if(this.checked){
         return '';
     } else {
         return 'checked';
     };
});

上記の一行目「.attr」の使い方は1.4からの方法です。属性の値に関数を割り当てられるようになり，より柔軟に値を変化させられるようになっています。今回は，そのinputのchecked属性がすでに入っているかどうかの判定をして，入っているならchecked属性を削除し，入っていないなら追加するという内容になっています。

スクリプトは以上です。これをまとめてみましょう。

ここまでのスクリプトをまとめたもの

jQuery(function($){
     $('li','ul').click(function(){
         var num = $(this).index();
         $(this).hide().attr('class','off').parent().siblings('ul').children().eq(num).show().attr('class','on');
         $('input').eq(num).attr('checked',function(){
             if(this.checked){
                 return '';
             } else {
                 return 'checked';
             };
         });
     });
});

上記のサンプルを試してください。点線より上が未選択，下が選択中のエリアになります。クリックした際に，実際にinputにchecked属性がついているかどうかは，Firebugのコンソールで，下記スクリプトをそれぞれクリックした後に実行してみてください。

checked属性がついたかどうかをFirebugのコンソールで確認する

console.log($('input:checked').length);

選択中のエリアに入っている数だけinputのchecked属性がついているのがわかると思います。

JavaScript, jQuery, Web制作, Webデザイン

長谷川広武（はせがわひろむ；h2ham）

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て，2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり，自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/

徳田和規（とくだかずのり；5509；nori）

マインドフリー株式会社，ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち，ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）

バックナンバー一覧

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

オープンソースの知的財産権/暗号輸出の違反防止ツール「Black Duck Suite」ご紹介セミナー（3/5，12）
矢野りんさんに学ぶ、“使える”デザイン基礎知識（3/6, 13）
最新ソフトウェアプロテクションの導入方法（3/8～4/16）
第16回エンバカデロ・デベロッパーキャンプバーチャルエディション（3/11，12）
Adobe FLASH PLATFORM CAMP Tokyo（3/16）
「組込みデータベースを利用した開発のポイントとDeviceSQLのご紹介」セミナー（3/17）

2010年版SEO体得講座: 本連載では，いまや企業サイトの戦略の1つとして欠かすことのできないSEOについて，最新トレンドからすぐに使えるTipsまでを紹介します。
小型Linuxサーバの最高峰 OpenBlockS 600活用指南: 搭載メモリの増加，CPUクロックの向上など，あらゆる面が強化された期待の新モデルOpenBlockS 600。この記事ではOpenBlockS 600の紹介から，活用するためのさまざまなノウハウを紹介していきます。
はじめMath! Javaでコンピュータ数学: プログラミング言語入門者向けに，知っていると役立つ数学的トピックスを紹介します。簡単な演習問題と解説で，即活用できる知識を目指します。
教科書には載っていないネットワークエンジニアの実践技術: ネットワークエンジニア，インフラエンジニアのトラブル対応には，時には「教科書通りにいかない」テクニックが必要となります。資格試験では得られないこうした実践的な技術について，実例を元に紹介します。
Googleケータイ，世に現る: 2008年9月，Googleが中心となって開発されている「Android」を採用した携帯電話「T-Mobile G1」が発表されました。本連載ではT-Mobile G1を中心にGoogleケータイに迫ります。
モバゲーオープンプラットフォームに挑戦！――面白法人カヤック流モバゲーオープンプラットフォーム企画と開発のイロハ: 2010年1月にリリースとなったモバゲーオープンプラットフォーム。その制作企業であるカヤックが，アイデアを企画に落とし込み，開発までのノウハウを紹介します。
プロトタイピングツールSketchFlowを用いた，Silverlightアプリ開発: SketchFlowプロトタイプ作成からアプリケーション開発までをExpression Blend 3を使って実践的に解説します。
Ubuntu Weekly Recipe: Ubuntuの強力なデスクトップ機能を活用するための，いろいろなレシピをお届けします。