Изменить стиль, если флажок установлен

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