为了便于用户理解，直接粘贴下面的代码即可
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
时间： 2024-10-31 11:05:22