zoukankan html css js c++ java

jQuery实现全选，全不选，反选

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>jQuery实现全选，全不选，反选</title>
 6 
 7 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
 8 <script type="text/javascript">
 9     $(function() {
10 
11         $("#quanxuan").click(function() {
12             $("input[name=interest]").attr("checked", true);
13         });
14 
15         $("#quanbuxuan").click(function() {
16             $("input[name=interest]").attr("checked", false);
17         });
18 
19         $("#fanxuan").click(function() {
20             var arr = $("input[name=interest]");
21             arr.each(function(i) {
22                 var obj = arr.eq(i);
23                 obj.attr("checked", !obj.attr("checked"));
24                 /*   if(obj.attr('checked')==true){
25                       obj.attr("checked",false);
26                   }else{
27                       obj.attr("checked",true);
28                   } */
29             });
30         });
31     });
32 </script>
33 
34 </head>
35 
36 <body>
37 
38     兴趣爱好：
39     <input name="interest" type="checkbox" value="eating" checked="checked" />吃
40     <input name="interest" type="checkbox" value="drinking" />喝
41     <input name="interest" type="checkbox" value="playing" />玩
42     <input name="interest" type="checkbox" value="sleeping" />睡
43     <br />
44     <input type="button" value="全选" id="quanxuan" />
45     <input type="button" value="全不选" id="buxuan" />
46     <input type="button" value="反选" id="fanxuan" />
47 
48 
49 </body>
50 </html>

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 <title>jQuery实现全选，全不选，反选</title>
  6 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
  7 
  8 <script type="text/javascript">
  9     $(function() {
 10         $("#all").click(function() {
 11             //$(":checkbox").attr("checked","true");
 12             $(":checkbox").each(function(index, ele) {
 13                 ele.checked = true;
 14             });
 15         });
 16 
 17         $("#notAll").click(function() {
 18             //$(":checkbox").attr("checked","false");
 19             $(":checkbox").each(function(index, ele) {
 20                 ele.checked = false;
 21             });
 22         });
 23 
 24         $("#reverse").click(function() {
 25             $(":checkbox").each(function(index, ele) {
 26                 ele.checked = !ele.checked;
 27             });
 28         });
 29 
 30         //---------------------------------------------------------------            
 31 
 32         $("input[name='all']").click(function() {
 33             //全选框状态值
 34             var flag = this.checked;
 35             //选中所有
 36             $("input[name='id']").each(function(index, ele) {
 37                 ele.checked = flag;
 38             });
 39         });
 40 
 41         $("input[name='id']").click(function() {
 42             //找到所有子复选框
 43             var $sons = $("input[name='id']");
 44 
 45             //找到所有选中的子复选框
 46             var $checksons = $("input[name='id']:checked");
 47 
 48             if ($checksons.length == $sons.length) {
 49                 $("input[name='all']")[0].checked = true;//转换为dom对象
 50             } else {
 51                 $("input[name='all']")[0].checked = false;
 52             }
 53         });
 54 
 55     });
 56 </script>
 57 
 58 </head>
 59 <body>
 60     <button id="all">全选</button>
 61     <button id="notAll">全不选</button>
 62     <button id="reverse">反选</button>
 63     <br>
 64     <input type="checkbox" name="fav" value="1" />爱好1
 65     <input type="checkbox" name="fav" value="2" />爱好2
 66     <input type="checkbox" name="fav" value="3" />爱好3
 67     <input type="checkbox" name="fav" value="4" />爱好4
 68     <input type="checkbox" name="fav" value="5" />爱好5
 69     <input type="checkbox" name="fav" value="6" />爱好6
 70     <input type="checkbox" name="fav" value="7" />爱好7
 71     <hr>
 72 
 73     <table border="1" cellspacing="0" width="60%" align="center">
 74         <tr>
 75             <th><input type="checkbox" name="all" />
 76             </th>
 77             <th>编号</th>
 78             <th>姓名</th>
 79             <th>性别</th>
 80             <th>地址</th>
 81         </tr>
 82         <tr>
 83             <td><input type="checkbox" name="id" /></td>
 84             <td>1</td>
 85             <td>张三</td>
 86             <td>男</td>
 87             <td>北京</td>
 88         </tr>
 89         <tr>
 90             <td><input type="checkbox" name="id" /></td>
 91             <td>2</td>
 92             <td>张三</td>
 93             <td>男</td>
 94             <td>北京</td>
 95         </tr>
 96         <tr>
 97             <td><input type="checkbox" name="id" /></td>
 98             <td>3</td>
 99             <td>张三</td>
100             <td>男</td>
101             <td>北京</td>
102         </tr>
103         <tr>
104             <td><input type="checkbox" name="id" /></td>
105             <td>4</td>
106             <td>张三</td>
107             <td>男</td>
108             <td>北京</td>
109         </tr>
110         <tr>
111             <td><input type="checkbox" name="id" /></td>
112             <td>5</td>
113             <td>张三</td>
114             <td>男</td>
115             <td>北京</td>
116         </tr>
117         <tr>
118             <td><input type="checkbox" name="id" /></td>
119             <td>6</td>
120             <td>张三</td>
121             <td>男</td>
122             <td>北京</td>
123         </tr>
124         <tr>
125             <td><input type="checkbox" name="id" /></td>
126             <td>7</td>
127             <td>张三</td>
128             <td>男</td>
129             <td>北京</td>
130         </tr>
131     </table>
132 </body>
133 </html>

查看全文

相关阅读:
jQuery选择器
 js创建对象的几种方式
 call（）和apply（）
js实现二分查找
 关于HTTP请求
 node/npm命令收集
 微信H5开发笔记——记录开发中用到的知识(手机摇动、事件捕获、wechat禁止分享、正则、promise...)
css额外学习笔记
 gulp 结构和运行步骤——笔记1
手机版H5开发--收集大神们的笔记

原文地址：https://www.cnblogs.com/Azmzb/p/4916046.html