jquery 实现邮箱的全选/全不选全选与全不选功能

最新推荐文章于 2020-09-11 17:19:00 发布

原创最新推荐文章于 2020-09-11 17:19:00 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javaScript 同时被 2 个专栏收录

73 篇文章

订阅专栏

jQuery

38 篇文章

订阅专栏

本文探讨了HTML页面中使用JavaScript实现全选/全不选、反选功能及页面元素状态联动的技术细节。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
     <script src="c:\jquery.js""></script>
</head>
       <script>
//                      全选/全不选
                       $(function(){
                    // alert(true&&false);
                        $("#checkboxAll").click(function(){
                                $("[name=items]:checkbox").attr("checked",this.checked)
                        });

//                      反选
                        $("#checkRev").click(function(){
                                $("[name=items]:checkbox").each(function(){
                                    this.checked=!this.checked;
                                });
                        });
//                      绑定
                        $("[name=items]:checkbox").click(function(){
                               var flag=true;
                                $("[name=items]:checkbox").each(function(){
                                    if(!this.checked){
                                        flag=false;
                                        return false;

                                    }
                                });
                                $("#checkboxAll").attr("checked",flag);
                        });
                })
       </script>
   <body>
       你喜欢的水果是?
       <input type="checkbox" id="checkboxAll">全选/全不选</input><br>

       <input type="checkbox" name="items">苹果</input>
       <input type="checkbox" name="items">香蕉</input>
       <input type="checkbox" name="items">西瓜</input>
       <input type="checkbox" name="items">葡萄</input><br>
       <input type="button" id="checkRev" value="反选"></input><br>
   </body>
</html>