jQueryによるチェックボックスの制御

質問

いつもお世話になっています。

只今jQueryを勉強中なのですがチェックボックスの制御が上手くできずに困っています。

<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

<input type="checkbox" id="list1" name="example" value="">リスト1
<input type="checkbox" id="list2" name="example" value="">リスト2
<input type="checkbox" id="list3" name="example" value="">リスト3

リスト１をクリックした時はチェックボックス１にチェックが入り他のチェックが外れる
リスト2をクリックした時はチェックボックス2にチェックが入り他のチェックが外れる

この様な処理ができるようにしたいのですが
jqueryでこちらを再現することができるのでしょうか？

もしよろしければどなたかご教示ください。

回答No.1

LancerVII · ベストアンサー

こんにちは。

HTMLの構成によってセレクタの内容が変わってしまいますが、以下のようなイメージです。

$().ready ( function() {
// liのクリックイベントを設定
$('li').click ( function() {
// まずは全てのチェックを外す
$('input:checkbox').removeAttr ( 'checked' );
// クリックされたリストのindexを取得して同じindexのチェックボックスにチェックを入れる
// よって、リスト2の場合はリスト2にチェックが入る
$('input:checkbox:eq('+$(this).index()+')').attr ( 'checked', 'checked' );
});
});

全てのチェックを消して、特定のチェックを入れるという処理は基本的に変わらないと思います。

お礼

確かに一度クリアしてから選べば解決ですね！
難しく考えすぎてその方法が浮かびませんでした

非常に参考になりました。
ありがとうございますm(_ _)m