jquery - チェックボックスがオンになっている場合はスタイルを変更する

Question

どうやってやるの ？これは機能しておらず、結果も効果もエラー出力もありません。

$('input[type=checkbox]').each(function() 
    {
            if($(this).attr("checked") === true){
            $('.hoverbox .a').css('text-transform', 'uppercase');
            }
            else
            {
            $('.hoverbox .a').css('text-transform', 'lowercase');
            }
    });

Answer 1

おそらくイベントハンドラーが必要です。

$('input[type=checkbox]').on('change',function(e) {
   // do stuff
});

http://api.jquery.com/on

または、おそらく（私があなたの意図を理解するのは難しいですが）.prop()代わりに使用する必要があります.attr()：

if ($(this).prop('checked')) {
    // do something 
} else {
    // do something else
}

更新：すべてをまとめる：

$('input[type=checkbox]').on('change',function(e) {
    if ($(this).prop('checked')) {
        $('.hoverbox .a').css('text-transform', 'uppercase');
    } else {
        $('.hoverbox .a').css('text-transform', 'lowercase');
    };
});

カスタムクラスを追加して切り替えると、少し手間が省けます。

$('input[type=checkbox]').on('change',function(e) {
    $('.hoverbox .a').toggleClass('uppercase');
});

CSS：

.hoverbox .a {
    text-transform: lowercase;
}
.hoverbox .a.uppercase {
    text-transform: uppercase;
}

Answer 2

なぜCSSを使用できないのですか？なぜJavaScriptを無駄にするのですか？

input[type=checkbox]:checked + div {
    text-decoration:underline;
}