清爽盒子搜索 QSbox.cn

一个专注清爽体验的网站工具，清爽博客i.qsbox.cn

JQuery实现表格复选框，

由 ·

利用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);
                    }
                });
            });

参考 https://blog.csdn.net/zhang245754954/article/details/54799708?

标签：

您可能还喜欢...

发表回复