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>