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

Question

So I have a table like this

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

Demo:

 $(document).ready(function() { $('.pretty tr').toggle(function() { $(this).find(':checkbox').attr('checked', true); $(this).toggleClass('red'); }, function() { $(this).toggleClass('red'); $(this).find(':checkbox').attr('checked', false); }); });

 table { font-family: 'Arial'; margin: 25px auto; border-collapse: collapse; border: 1px solid #eee; border-bottom: 2px solid #00cccc; box-shadow: 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.05), 0px 30px 20px rgba(0, 0, 0, 0.05); } table td:hover { background: #C1FFC1; } table td:click { background: #fcc; } table td:hover { color: #000; } table th, table td { color: #999; border: 1px solid #eee; padding: 12px 35px; border-collapse: collapse; } table th { background: #00cccc; color: #fff; text-transform: uppercase; font-size: 12px; } table th.last { border-right: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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>

I want to be able to, instead of just changing colour while hovering retain the colour while check box is checked for each box in the table.

I've tried for quite a while now and cannot get the js to do what I want, any help would be greatly appreciated.

Answer 1

Have a css rule like this which will help you to toggle checkbox selection

.selected{
    background-color: #C1FFC1;
}

In your js you can do something like this

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

Updated your jsfiddle demo

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

 table { font-family:'Arial'; margin: 25px auto; border-collapse: collapse; border: 1px solid #eee; border-bottom: 2px solid #00cccc; box-shadow: 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.05), 0px 30px 20px rgba(0, 0, 0, 0.05); } table td:hover { background: #C1FFC1; } table td:click { background: #fcc; } table td:hover { color: #000; } table th, table td { color: #999; border: 1px solid #eee; padding: 12px 35px; border-collapse: collapse; } table th { background: #00cccc; color: #fff; text-transform: uppercase; font-size: 12px; } table th.last { border-right: none; } .selected{ background-color: #C1FFC1; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

Hope this helps