checkしたところのlabel要素にcssを当てたい

Question

while 文で、チェックボックス

<input type="checkbox" class="check" id="ID" ><label class="label" for="ID">テキスト</label>

を回して、

<input type="checkbox" class="check" id="ID1" ><label class="label" for="ID1">テキスト</label>
<input type="checkbox" class="check" id="ID2" ><label class="label" for="ID2">テキスト</label>
<input type="checkbox" class="check" id="ID3" ><label class="label" for="ID3">テキスト</label>
<input type="checkbox" class="check" id="ID4" ><label class="label" for="ID4">テキスト</label>
:
:
:
100、200個

□テキスト
□テキスト
□テキスト
□テキスト
:
:
:
100、200個

と表示させた際に

チェックがされたところの<label>要素だけにスタイルを当てたいのですが、

うまくできる方法はないでしょうか？

Answer 1

#26254 whileで繰り返し表示したcheckboxに個別にスタイルシートを当てたい とほぼ同様の内容かと思われますが、
CSS3でIE9以上対応で良いのであれば:checkedでチェックされたチェックボックスが選択できますので、
チェックボックス直後のlabelであれば隣接セレクタ(+)で選択が可能となります。

input[type="checkbox"]:checked + .label {
  /* チェックされたチェックボックス直後の.labelのスタイル */
}

参考 隣接セレクタ－スタイルシートリファレンス

Comments

[yutaka-0429]

できました。本当にありがとうございます。

[KiKiKi_KiKi]

> yutaka-0429 さん
解決した場合は解決済みにして頂けますと幸いです。