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

试试这个：

$(function(){

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

});

Answer 3

如果要在更改复选框值时切换css，请尝试以下操作：

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

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

Answer 4

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

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

});

防止if语句:)多态性。

Answer 5

将您的脚本编写为

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

html jquery表单复选框

5 个答案: