JQuery实现checkbox选中时颜色改变

最新推荐文章于 2024-05-28 16:17:33 发布

晴天;'

最新推荐文章于 2024-05-28 16:17:33 发布

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/sj15560122716/article/details/106890649

版权

JQ代码

 <script type="text/javascript">
        $(document).ready(function () {
            //添加颜色 隔行变色
            $("tbody > tr:even").addClass("even");
            $("tbody > tr:odd").addClass("odd");
            //当多选框被选中时让整行变色
            $(":checkbox").click(function () {
                //判断是否选中多选框
                if ($(this).attr("checked")) {
                    $(this).parents("tr").addClass("selected");
                } else {
                    $(this).parents("tr").removeClass("selected");
                }
            });
        });
    </script>

<body>
<table>
    <thead>
    <tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
    </thead>
    <tbody>
    <tr><td><input type="checkbox" name="choice" value=""/></td>
        <td>张山</td><td>男</td><td>浙江宁波</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" /></td>
        <td>李四</td><td>女</td><td>浙江杭州</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" /></td>
        <td>王五</td><td>男</td><td>湖南长沙</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" /></td>
        <td>找六</td><td>男</td><td>浙江温州</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" /></td>
        <td>Rain</td><td>男</td><td>浙江杭州</td></tr>
    <tr><td><input type="checkbox" name="choice" value="" /></td>
        <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>
    </tbody>
</table>
</body>

效果

晴天;'

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现checkbox选中时颜色改变

JQ代码 <script type="text/javascript"> $(document).ready(function () { //添加颜色隔行变色 $("tbody > tr:even").addClass("even"); $("tbody > tr:odd").addClass("odd"); //当多选框被选中时让整行变色
复制链接

扫一扫