在选中时更改td的背景颜色

Question

How do I do this? I have a checkbox that when you click/check the full td column will be having a background color. Then if it is unchecked, it will remove its background-color. Also if it is checked already and the user checked another checkbox , the one checked will have the background-color and the previous one will have no background color.

jsfiddle

Answer 1

You should just add a col tags to your HTML table. You can then set the background-color of the col and will make all the TDs in the column that color:

 function ChangeColColor(chkCol,col) { var varCol = document.getElementById(col); var varColor = "White"; if (chkCol.checked == true) { varColor = "Red"; } varCol.style.backgroundColor = varColor; } 

 <table> <colgroup> <col id="colA"> <col id="colB"> <col id="colC"> </colgroup> <tr> <td>Column A <input id="chkColA" type="checkbox" onclick="ChangeColColor(this,'colA')"/></td> <td>Column B <input id="chkColB" type="checkbox" onclick="ChangeColColor(this,'colB')"/></td> <td>Column C <input id="chkColC" type="checkbox" onclick="ChangeColColor(this,'colC')"/></td> </tr> <tr> <td>Data A:1</td> <td>Data B:1</td> <td>Data C:1</td> </tr> <tr> <td>Data A:2</td> <td>Data B:2</td> <td>Data C:2</td> </tr> <tr> <td>Data A:3</td> <td>Data B:3</td> <td>Data C:3</td> </tr> </table> 

Answer 2

Try something like below

 $('input:checkbox').click(function() { $(this).parent().addClass('green') $('input:checkbox').not(this).prop('checked', false).parent().removeClass('green'); }); 

 .green { background-color: green; width: 50px; height: 50px; padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table width="200" border="1"> <tbody> <tr> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> </tr> </tbody> </table>