チェック項目を選択・未選択のエリアにわける
前回はテキストボックスに入力したパスワードを見えるようにする方法をご紹介しました。
今回ご紹介するのは，
選択・
仕組みを考える
今回は仕組みから考えてみましょう。
- 選択・
未選択エリアに同じ数のリストをそれぞれ用意 - 最初に表示させるもの以外を非表示に
- クリックをしたら，
その要素は非表示にし， 同じリスト位置(○番目)の要素を表示させる - 選択エリアに入れる場合は同じ位置(○番目)のチェックボックスをチェック状態に，
未選択位置に入れる場合はその逆をチェック状態にする
順を追って見ていくことにしましょう。
まずはHTMLを設定します。選択・
使用する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を見てもらうとわかると思うのですが，
HTMLをよりシンプルにして作成するのであれば，
今回は，
実際のサイト制作においてでは，
また，
CSS
ul li.off , input{
display:none;
}これで，
スクリプトを考える
続いて次はスクリプトです。先日，
まずは，
Script
jQuery(function($){
$('li','ul').click(function(){
○○・・・
});
});続いてクリックした要素が，
.index()
var num = $(this).index();1.
次は，
$(this).parent().siblings('ul').children().eq(num).show()このままだとわかりづらいですが，
これにプラスして，
$(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';
};
});上記の一行目
スクリプトは以上です。これをまとめてみましょう。
ここまでのスクリプトをまとめたもの
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';
};
});
});
});
上記のサンプルを試してください。点線より上が未選択，
checked属性がついたかどうかをFirebugのコンソールで確認する
console.log($('input:checked').length);選択中のエリアに入っている数だけinputのchecked属性がついているのがわかると思います。
