jQuery实现全选与全部选

最新推荐文章于 2024-01-23 19:19:19 发布

weixin_33961829

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量414

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvxisha/p/11046797.html

版权

为了便于用户理解，直接粘贴下面的代码即可

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <link rel="stylesheet" href="../css/font-awname.css">
  7     <style>
  8         *{
  9             margin: 0;
 10             padding:0;
 11             list-style: none;
 12         }
 13         .boxs{
 14             margin: 20px 0 10px 20px;
 15         }
 16         /*导出文件*/
 17         #downLoad{
 18             width:90px;
 19             height: 30px;
 20             background-color: #3aa1ff;
 21             color: #fff;
 22             text-align: center;
 23             line-height: 30px;
 24             cursor: pointer;
 25         }
 26         /*方法二方式*/
 27         .waysTwo{
 28             margin-top: 20px;
 29         }
 30         .waysTwo li{
 31             width: 20px;
 32             height: 20px;
 33             border: 1px solid #ccc;
 34             margin-top: 5px;
 35             color: #fff;
 36         }
 37         .waysTwo li:hover{
 38             border-color:#3aa1ff;
 39         }
 40         .boxBg{
 41             border: 1px solid #3aa1ff;
 42             background: #3aa1ff;
 43             color: #fff;
 44         }
 45     </style>
 46 </head>
 47 <body>
 48     <div class="boxs">
 49         <div id="downLoad"><i class="fa fa-upload" aria-hidden="true"></i>批量导出</div>
 50         <h3>全选与全不选方法二:</h3>
 51         <div class='waysOne'>
 52             <!-- 全选与全不选方法一 -->
 53             <ul id="main-demo">
 54                 <li ><input type="checkbox" id="sellectAll" name="sellectAll" title="写作" lay-skin="primary" >标题</li>
 55             </ul>
 56             <ul class="main-demo">
 57                 <li ><input class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary"></li>
 58                 <li ><input  class="selectBox" type="checkbox" name="selectBox" title="写作" lay-skin="primary" ></li>
 59             </ul>
 60         </div>
 61         <hr>
 62     <h3>全选与全不选方法二:</h3>
 63         <!-- 全选与全不选方法二 -->
 64         <div class="waysTwo">
 65             <ul>
 66                 <li class="palyer-tit-check">
 67                     <i class="fa fa-check"></i>
 68                 </li>
 69             </ul>
 70             <ul>
 71                 <li class="palyer-table-check">
 72                     <i class="fa fa-check"></i>
 73                 </li>
 74                 <li class="palyer-table-check">
 75                     <i class="fa fa-check"></i>
 76                 </li>
 77                 <li class="palyer-table-check">
 78                     <i class="fa fa-check"></i>
 79                 </li>
 80             </ul>
 81         </div>
 82     </div>
 83 </body>
 84 <script src="../js/jquery.js"></script>
 85 <script>
 86     /*input绑定属性时注意事项：
 87         给input绑定checked属性时不能用attr()方法，绑定不成功；
 88         prop()可以绑定checked事件，打印的checked值为boolean值，绑定成功为true,反之，为false
 89      */ 
 90 //头部-全选
 91 $(document).on('click', '#sellectAll', function() {
 92     var checkedOfAll=$("#sellectAll").prop("checked");
 93     // alert(checkedOfAll);
 94     $("input[name='selectBox']").prop("checked", checkedOfAll);
 95 });
 96 //列表-单选
 97 $(document).on('click', '.selectBox', function() {
 98     var ths = $(this);
 99     if (ths.checked == false) {
100         $("input[name=sellectAll]:checkbox").prop('checked', false);
101     }
102     else {
103         var count = $("input[name='selectBox']:checkbox:checked").length;
104         if (count == $("input[name='selectBox']:checkbox").length) {
105             $("input[name=sellectAll]:checkbox").prop("checked", true);
106         }else{
107             $("input[name=sellectAll]:checkbox").prop("checked", false);
108         }
109     }
110 });
111 
112 // 方法二
113 //顶部-全选按钮
114 var titCheck = $('.palyer-tit-check');
115 var tableCheck = $('.palyer-table-check');
116 titCheck.on('click', function(){
117     if($(this).hasClass('boxBg')){
118         $(this).removeClass('boxBg');
119         tableCheck.removeClass('boxBg');
120         return false;       
121     }
122     $(this).addClass('boxBg');
123     tableCheck.addClass('boxBg');
124 });
125 
126 //列表-单选按钮
127 console.log(tableCheck.length);
128 tableCheck.on('click', function(){
129     if($(this).hasClass('boxBg')){
130         $(this).removeClass('boxBg');
131         return false;       
132     }
133     $(this).addClass('boxBg');
134 });
135 
136 /*批量导出*/
137 $(document).on('click', '#downLoad', function() {
138     if (titCheck.hasClass('boxBg') || tableCheck.hasClass('boxBg')){
139         //下载执行的事件
140     }
141 });
142 </script>
143 </html>

转载于:https://www.cnblogs.com/lvxisha/p/11046797.html

weixin_33961829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选与全部选

为了便于用户理解，直接粘贴下面的代码即可 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel...
复制链接

扫一扫