Javascript 使用JQuery在td单击或复选框单击时更改td的CSS

如果用户单击

td

本身或复选框，我试图让我的

td

更改颜色

现在，如果用户单击

td

，css将更改，复选框将选中/取消选中

但如果单击该复选框，则不会发生任何更改。另外，如果页面被刷新，复选框被选中，但是CSS消失了

我做错了什么

A.
B
C
D
选择的变量={'background-color'：'#9F1313'，'color'：'#fff'}；
var unchosen={'background-color'：'transparent'，'color'：'#000'}；
$（'td'）。单击（函数（事件）{
if（！$（event.target）.is（'input'））{
$（'input:checkbox'，this）.prop（'checked'，function（i，value）{
突出显示（this，$（this）.closest（'td'）；
返回！值；
});
}
});
功能突出显示（cb、单元格）{
如果（cb.选中）{
$（单元格）.css（未关闭）；
}否则{
$（单元格）.css（选定）；
}
}

问题是由于事件从复选框冒泡到父项

td

，但是您可以完全避免问题，使代码更具语义，获得更好的支持，使用

标签

，然后根据复选框的

选中状态在父
td
上切换CSS类，这样做更简单。试试这个：


$（'.table responsive:checkbox'）。在（'change'，function（）上{
$（this.nexist（'td'）.toggleClass（'selected'，this.checked）；
});

标签{
显示：块；
字体大小：正常；
保证金：0；
}
运输署{
背景色：透明；
颜色：#000；
}
选择td{
背景色：#9F1313；
颜色：#fff；
}
A.
B
C
D
这是我的建议，这将绑定TD和checkbox中的事件，同时防止双重触发

$('td').on('click',function(event){ 
     var td  = $(this);
     var checkBox = $(this).find('input:checkbox');

     if($(event.target).is('input')){                 // checks if event target is checkbox
        event.stopPropagation();                      // prevents triggering click event on TD too
     } else {
        checkBox.trigger('click');                    // if its TD, triggers checkbox click event
        return;                                       // and stop the code
     }

     if(checkBox.is(':checked')){                     // checks if checkbox is checked!
        td.css('background-color','red');
     } else {
        td.css('background-color','transparent');
     }

 }); 

你可以在这里看到它的作用：

希望至少能有所帮助。
问题来自于事件冒泡添加
事件。stopImmediatePropagation（）到您的单击事件

$('td').click(function(event) {
event.stopImmediatePropagation();
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function(i, value) {
  highlight(this, $(this).closest('td'));
  return !value;
});
}
});

可能的副本谢谢！这更有意义。
$('td').click(function(event) {
event.stopImmediatePropagation();
if (!$(event.target).is('input')) {
$('input:checkbox', this).prop('checked', function(i, value) {
  highlight(this, $(this).closest('td'));
  return !value;
});
}
});