jquery - 选中一个复选框并更改另一个选项的字体颜色

Question

这是我的演示代码http://jsfiddle.net/Wwdmm/3/

但是当我点击时什么都没有发生require。我想单击require然后更改字体颜色，option2并在取消选中时option2删除它的类。

有什么错误？选择就在那里。谢谢

jQuery(document).ready(function(){
  $('#id_run_options_0').change(function(){
       if (this.checked){
          alert('checked');
          $('#id_run_options_1').addClass('highlight-option2');
       }else{
          alert('unchecked');
          $('#id_run_options_1').removeClass('highlight-option2');
}});
});

Answer 1

您正在尝试更改复选框的类（因此是颜色），但您应该更改标签的类（其父元素）。

这是您的代码的简短版本：

$("#id_run_options_0").change(function() {
  $("#id_run_options_1").parent().toggleClass("highlight-option2", this.checked);
});​

演示：http: //jsfiddle.net/Wwdmm/6/

Answer 2

您可以使用toggleClass方法简化类切换

jQuery(document).ready(function(){
  $('#id_run_options_0').change(function(){
      $('#id_run_options_1').parent().toggleClass('highlight-option2');
  });

  $('#id_run_options_1').change(function(){
      $('#id_run_options_1').parent().toggleClass('highlight-option2');
  });    
});

jsFiddler 演示

Answer 3

即使这段代码也能解决

$('#id_run_options_0').click(function(){
            $('label[for="id_run_options_1"]').toggleClass('highlight-option2');
        });

jsFiddle 演示链接