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