jquery - if :checked これにクラスを追加

Question

小さな問題があります。チェックボックスがチェックされているかどうかを確認したい、チェックされている場合は、彼の最初の兄弟にクラスを追加したい。HTML :

    <input class="box" type="checkbox">
    <p class="red">Red text </p>

    <input class="box" checked type="checkbox">
    <p class="red">I want this text in blue </p>

JS:

    if(jQuery(".box").is(":checked")) {
    jQuery(this).next().attr('class', 'blue');                              
}

ここの例: http://jsfiddle.net/LVEqn/

前もって感謝します ！

Answer 1

チェックボックスに続くすべての要素にクラス「blue」を追加する場合は、次のようにします。

$(".box:checked").next().addClass('blue');

既存のクラスを置き換えたい場合は、

$(".box:checked").next().attr('class', 'blue');

これを動的にしたい場合、つまりユーザーがチェックまたはチェックを外したときに変更する場合は、次のようにします。

$(".box").change(function(){
    $(this).next().attr('class', $(this).is(':checked') ? 'blue' : 'red');
});

デモンストレーション

Answer 2

これを試して：

jQuery(".box:checked").each(function(){
    jQuery(this).next().attr('class', 'blue');
})  

デモ: http://jsfiddle.net/LVEqn/2/ </p>

Answer 3

jQuery

$(".box:checked").next().addClass("blue");

CSS

.blue {color: blue !important;}