首页鼠标点击checkbox后，checkbox被选中，tr背景改变颜色html

鼠标点击checkbox后，checkbox被选中，tr背景改变颜色html

时间: 2024-04-10 19:28:09 浏览: 147

要实现鼠标点击checkbox后改变tr背景颜色的效果，你可以使用JavaScript来完成。首先，给checkbox添加一个点击事件监听，当checkbox被点击时触发相应的函数。在该函数中，你可以使用条件语句来切换tr元素的背景颜色。以下是一个示例的HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Change TR background color on checkbox click</title> <style> .selected { background-color: yellow; } </style> </head> <body> <table> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 1</td> </tr> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 2</td> </tr> <tr onclick="changeBackgroundColor(this)"> <td><input type="checkbox"></td> <td>Row 3</td> </tr> </table> <script> function changeBackgroundColor(row) { var checkbox = row.querySelector('input[type="checkbox"]'); if (checkbox.checked) { row.classList.add('selected'); } else { row.classList.remove('selected'); } } </script> </body> </html> ``` 在上面的示例中，每个tr元素都有一个点击事件监听器'onclick'，当被点击时会调用changeBackgroundColor函数。该函数首先获取到被点击行中的checkbox元素，然后根据checkbox的checked属性来切换tr元素的类名。如果checkbox被选中，就会添加一个名为'selected'的类，该类定义了背景颜色为黄色。如果checkbox未被选中，就会移除'selected'类，恢复默认背景颜色。你可以根据自己的需求修改示例代码中的样式和HTML结构。希望这能帮到你！

阅读全文