jquery - htmljqueryフォームチェックボックス

Question

HTML：

<td>
    <input type="checkbox" name="lit" value="literary"><span class="checkdata">&nbsp;Literary Event&nbsp;&nbsp;</span>
    <input type="checkbox" name="art" value="art"><span class="checkdata">&nbsp;Art Event&nbsp;&nbsp;</span>
    <input type="checkbox" name="cul" value="cultural"><span class="checkdata">&nbsp;Cultural Event&nbsp;&nbsp;</span>
</td>

脚本：

<script>
    $(function(){
        if ("input:checked") {
            $(".checkdata").css("color", "#F0F0F0");
        }
    });
</script>

ここで私がやろうとしているのは、ユーザーがチェックボックスをオンにしているかどうかを確認することです。もしそうなら、はspan class="checkdata"灰色に変わるはずです。しかし、それは起こりません。

Answer 1

これを試して

$(function(){
    $('input[type="checkbox"]').each(function(){
        $(this).click(function(){
        if ($(this).prop('checked'))
        {
            $(this).next(".checkdata").css("color", "#F0F0F0");
        }
        else
            $(this).next(".checkdata").css("color", "#000000");

        });
    });
});

フィドルのテスト：http：//jsfiddle.net/GQ4FY/1/

Answer 2

 $("input[type='checkbox']").change(function (){
var perform = {
   true : {'color' : 'green'},
   false: {'color' : 'red'}
 }, chk = $(this);

 $(".checkdata").css(perform[chk.is(":checked")]);

});  

ifステートメントを防ぐ:)ポリモーフィズム。

Answer 3

これを試して：

$(function(){

    if($("input").is(':checked')){
        $(".checkdata").css("color", "#F0F0F0");
    }

});

Answer 4

チェックボックスの値が変更されたときにcssを切り替える場合は、次のことを試してください。

$(function () {
    $("input[type='checkbox']").change(function () {
        var isChecked = $(this).is(":checked");
        if (isChecked) {
            $(".checkdata").css("color", "#F0F0F0");

        } else {
            $(".checkdata").css("color", "#000000");
        }
    });
});

Answer 5

スクリプトを次のように記述します

$(function() {
    $('input[type="checkbox"]').click(function() {
        $(this).next('.checkdata').css('color', this.checked ? '#F0F0F0' : '#000000');
    });
});