0

http://jsfiddle.net/2Wpfw/3/

私の質問のタイトルが最良の説明であるかどうかはわかりません。

input="checkbox" がチェックされているかどうかを確認し、チェックボックスの状態に応じてクラスを追加または削除するいくつかの方法でjqueryの助けを求めています。

とにかく、私のフォームマークアップは次のようになります...

<form>

    <ul class="select-wrapper">

        <li class="select-area">

            <input type="checkbox" name="colour1" id="colour1" value="black">

            <label for="colour1">Number 1</label>

        </li>

    </ul>

</form>


私の非常に貧弱な試みでこのフィドルを見てください。http://jsfiddle.net/2Wpfw/3/

にカーソルを合わせるとわかるように、<li>それらは赤くなりますが、入力が既にチェックされている場合、または入力がライブで選択されている場合は、赤のままではありません.

入力がページ上でライブで選択されている場合は赤のままにし、チェックを外すと黒に戻りたいと思います。フォームは ajax ベースなので、エラーが発生した場合は、チェックされた入力 li が赤で表示されるようにします (フォームが送信された後に関数を再度実行することでこれを行います)。

.box-checkedクラスを追加および削除すると、これらが赤で表示されます。

どこから始めればよいか、私はかなり迷っているので、誰でも可能な作業を見ることができますか。

どんな助けでも大歓迎です。ありがとう

http://jsfiddle.net/2Wpfw/3/

4

2 に答える 2

1 
$(".select-area input[type='checkbox']").on('change', function() {
    $(this).closest('.select-area').toggleClass('box-checked', this.checked);
});
​

フィドル

また、CSS をより具体的にする必要があります。現在、.box-checkedスタイルは元のスタイルをオーバーライドしていないため、次のようになります。

.select-area.box-checked {
    background: red;
}
于 2012-12-06T17:52:39.553 に答える
1

以下のコードを試してください

$inputCB.bind('change', function (){

$(this).parent().toggleClass('box-checked',this.checked);
});

select-area は優先される「黒」の背景を適用するため、CSS はフィドルで !important を必要とします

http://jsfiddle.net/2Wpfw/13/

于 2012-12-06T18:00:41.663 に答える