JQuery实现表格复选框

最新推荐文章于 2025-05-14 15:34:55 发布

原创最新推荐文章于 2025-05-14 15:34:55 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用JQuery实现表格中复选框的全选、全不选和反选功能，提供了相应的代码示例，并展示了实际效果。

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

利用jquery实现全选全部选反选等等效果


<script language="JavaScript"  src="../js/jquery-1.4.2.js"></script>
  </head>
  <script type="application/javascript">
        $().ready(function(){
            $("#checkItems").click(function(){
                if($(this).attr("checked")){//被选中
                    $(":checkbox[name='items']").attr("checked",true);
                }else{
                    $(":checkbox[name='items']").attr("checked",false);
                }
            });

            $("#checkall").click(function(){
                $(":checkbox[name='items']").attr("checked",true);
                $("#checkItems").attr("checked",true);
            });

            $("#checkallNo").click(function(){
                $(":checkbox[name='items']").attr("checked",false);
                $("#checkItems").attr("checked",false);
            });

            $("#check_revsern").click(function(){
//              $(":checkbox[name='items']:checked").attr("checked",false);
//              $(":checkbox[name='items']:not(:checked)").attr("checked",true);
                $(":checkbox[name='items']").each(function(){
                    if($(this).attr("checked")){//如果被选中
                        $(this).attr("checked",false);
                    }else{//没有被选中
                        $(this).attr("checked",true);
                    }
                });
            });
        });
  </script>
  <body>
    您的爱好很广泛!!!
     <br>
     <input type="checkbox" name="checkItems"  id="checkItems" value="全选/全不选"/>全选/全不选
     <br>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="游泳"/>游泳
        <input type="checkbox" name="items" value="唱歌"/>唱歌
        <br>
        <input type="button" name="checkall" id="checkall" value="全选" />
        <input type="button" name="checkall" id="checkallNo" value="全不选" />
        <input type="button" name="checkall" id="check_revsern" value="反选" />
  </body>
</html>

全选和全不选代码

$().ready(function(){
            $("#checkItems").click(function(){
                if($(this).attr("checked")){//被选中
                    $(":checkbox[name='items']").attr("checked",true);
                }else{
                    $(":checkbox[name='items']").attr("checked",false);
                }
            });

}）；

全选代码

$("#checkall").click(function(){
                $(":checkbox[name='items']").attr("checked",true);
                $("#checkItems").attr("checked",true);
            });

反选代码

$("#check_revsern").click(function(){
//              $(":checkbox[name='items']:checked").attr("checked",false);
//              $(":checkbox[name='items']:not(:checked)").attr("checked",true);
                $(":checkbox[name='items']").each(function(){
                    if($(this).attr("checked")){//如果被选中
                        $(this).attr("checked",false);
                    }else{//没有被选中
                        $(this).attr("checked",true);
                    }
                });
            });

效果截图

这里写图片描述