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

虽然添加自定义类和toggling it可以省去一点麻烦：

$('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;
}

选中复选框后更改样式

2 个答案: