复选框选中改变tr整行颜色事件

最新推荐文章于 2025-05-28 11:39:43 发布

代码那点事ing

最新推荐文章于 2025-05-28 11:39:43 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_36925731/article/details/78322608

jQuery 专栏收录该内容

3 篇文章

订阅专栏

这段JavaScript代码展示了如何使用jQuery监听复选框的点击事件，当复选框被选中时，其所在的表格行背景色更改为#b2dba1，取消选中则恢复原背景色。示例包含了一个包含姓名、性别和年龄信息的表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <script type="text/javascript">

        $(function () {
 //input 单击事件
            $("input").click(function () {
                //获取checkbox选中项
                if ($(this).prop("checked") == true) {
                    $(this).parent().parent().css("background", "#b2dba1");
                } else {
                    $(this).parent().parent().css("background", "");
                }
            });
})

<body>
    <table style="text-align: center" class="auto-style1">
        <tr>
            <td>选 择</td>
            <td>姓 名</td>
            <td>性 别</td>
            <td>年 龄</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox1" type="checkbox" /></td>
            <td>杨菲</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox2" type="checkbox" /></td>
            <td>刘儒龙</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox3" type="checkbox" /></td>
            <td>梁欢</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox4" type="checkbox" /></td>
            <td>罗宏祥</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>
                <input id="Checkbox5" type="checkbox" /></td>
            <td>李清峰</td>
            <td>男</td>
            <td>24</td>
        </tr>
    </table>
</body>