jqueryについて

質問

ただいま、jqueryのtoggle()を使って、
チェックボックスのON/OFFでimgのclassを切り替える（imgをクリックしてチェックボックスをON/OFFもできる）ということを
しているのですが、なぜか、チェックボックスをクリックしても、
ボタンの反応はしているのですが、チェック（黒い「レ」）が表示されません。
以下、jsです。
※チェックボックスと画像の組み合わせは複数あります。

$(function(){

$("li.p01").toggle(
function(){
$("input.c01").attr("checked","checked");
$("li.p01").attr("class","p01on");
},
function(){
$("input.check01").removeAttr("checked");
$("li.p01on").attr("class","p01");
}
);
$("input.check01").toggle(
function(){
$("li.p01").attr("class","p01on");
},
function(){
$("li.p01on").attr("class","p01");
}
);

$("li.p02").toggle(
function(){
$("input.check02").attr("checked","checked");
$("li.p02").attr("class","p02on");
},
function(){
$("input.check02").removeAttr("checked");
$("li.p02on").attr("class","p02");
}
);
$("input.check02").toggle(
function(){
$("li.p02").attr("class","p02on");
},
function(){
$("li.p02on").attr("class","p02");
}
);

});

ご教授お願いいたします。

また、ボタンが10個あるのですが、
このまま、複製していくのもどうかと思うんですが、
もっと簡単にまとめる方法などあるのでしょうか。

ご回答よろしくお願いいたします。

回答No.1

imq · ベストアンサー

サンプルはimgではなくliになっていますが、liの中にimgがある解釈でよろしいでしょうか。
inputとliでどちらをクリックしても同じ動作をさせるという意図でしたら、それぞれにtoggleメソッドを使うとおかしな動作になると思います（←liとinputを交互にクリックしたときのことを考えてください）

大体以下の方針で変更するといいと思います。
・liの方はtoggleは使わず、clickメソッドを使う
・inputの方はchangeメソッドを使うのが筋。ただし、jsでchecked属性を変更したときはイベントが発生しない。
・inputとliはそれぞれ共通のclassを持たせておく。
・セレクタは共通のクラスで指定して、eachメソッドで回し、indexに対して個別の処理をさせる。
・チェックボックス選択時にliのスタイルを変えたいときはclassを追加する。
・classの部分追加・削除はattrよりもaddClass、removeClassを使う方がスマート。
・更に今回はtoggleClassを使う方がいいです。
・checked属性の追加・削除ではなく、属性値をブールで設定する。
・同一のjQueryオブジェクトを何度も使用するときは、初めに変数に代入しておいた方がスマート。

<script type="text/javascript">
//<![CDATA[
$(function(){

var $p = $("li.p");
var $c = $("input.c");

$p.each(function(i) { //eachメソッドのコールバック関数の第一引数はindex
$(this).click(function() {
$c.eq(i).attr("checked", !$c.eq(i).attr("checked"));
$(this).toggleClass("p-on");
});
});

$c.each(function(i) {
$(this).change(function() {
$p.eq(i).toggleClass("p-on");
});
});

});
//]]>
</script>

<ul>
<li class="p"><img src="…" /></li>
<li class="p"><img src="…" /></li>
…
</ul>

<input class="c" type="checkbox" />
<input class="c" type="checkbox" />
…

お礼

ありがとうございました！

toggle()の意味をちゃんと理解してませんでした！
参考にしてみます！