Javascript 在html中使用复选框切换表格颜色

我有一张这样的桌子

<table class="rest_tab" border="1">
<tbody><tr><th>Times</th><th></th><th></th></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox4" on=""></td><td align="right"><input  type="checkbox" class="selectAll" id="Checkbox5" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox7" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox8" on=""></td></tr>
<tr><td <="" td=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox10" on=""></td><td align="right"><input type="checkbox" class="selectAll" id="Checkbox11" on=""></td></tr>
</tbody></table>

表格{
字体系列：“Arial”；
保证金：25像素自动；
边界塌陷：塌陷；
边框：1px实心#eee；
边框底部：2个实心#00cccc；
盒影：0px 0px 20px rgba（0,0,0,0.1），0px 10px 20px rgba（0,0,0,0.05），0px 20px 20px rgba（0,0,0,0,0.05），0px 30px 20px rgba（0,0,0,0.05）；
}
表td：悬停{
背景：#C1FFC1；
}
表td：点击{
背景：#fcc；
}
表td：悬停{
颜色：#000；
}
表th，
表td{
颜色：#999；
边框：1px实心#eee；
填充：12px 35px；
边界塌陷：塌陷；
}
表th{
背景:#00中交;；
颜色：#fff；
文本转换：大写；
字体大小：12px；
}
表th.last{
边界权：无；
}

时代
有这样一个css规则，它将帮助您切换复选框选择

.selected{
    background-color: #C1FFC1;
}

在js中，您可以执行以下操作

$('.selectAll').change(function(){
  $(this).closest('td').toggleClass('selected');
});

更新您的


$（文档）.ready（函数（）{
$（'.selectAll'）.change（函数（）{
$（this）.closest（'td'）.toggleClass（'selected'）；
});
});
表格{
字体系列：'Arial'；
保证金：25像素自动；
边界塌陷：塌陷；
边框：1px实心#eee；
边框底部：2个实心#00cccc；
盒影：0px 0px 20px rgba（0,0,0,0.1），0px 10px 20px rgba（0,0,0,0.05），0px 20px 20px rgba（0,0,0,0,0.05），0px 30px 20px rgba（0,0,0,0.05）；
}
表td：悬停{
背景：#C1FFC1；
}
表td：点击{
背景：#fcc；
}
表td：悬停{
颜色：#000；
}
表th、表td{
颜色：#999；
边框：1px实心#eee；
填充：12px 35px；
边界塌陷：塌陷；
}
表th{
背景:#00中交;；
颜色：#fff；
文本转换：大写；
字体大小：12px；
}
表th.last{
边界权：无；
}
.选定{
背景色：#C1FFC1；
}

时代
toggle（fn，fn）
不推荐使用。如果它解决了您的问题，请将其标记为已回答。事实上，我刚刚在我开发的本地计算机上尝试了这一点，它在JSFIDLE中工作，但在我的网站中不工作：/有任何错误吗？此外，在本文档中，您的jsfiddle jquery不包括在内。所以，确保你的网站上有它。我已经在网站上包括了jquery，无论如何，谢谢你的帮助。我相信我会解决它的