选中复选框后更改样式

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;
}