jquery学习之1.21-小练习4实现对复选框的全选，全不选，反选
通过prop和removeAttr方法实现对复选框的全选，全不选，反选。
效果图如下：
代码如下：
1 <%@ page language="java" import="java.util.*" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <title>11</title> 7 <style type="text/css"> 8 body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;} 9 </style> 10 <script type="text/javascript" src="../js/jquery-1.11.0.js"> 11 </script> 12 <script language="javascript"> 13 $(document).ready(function() 14 { 15 $("#ckAll").click(function(){ 16 if(this.checked) 17 { 18 alert("aaa"); 19 $("input[name='items']").prop("checked","checked"); 20 /*备注：此时如果是用attr代替prop，会出现第二次选中这个checkbox的时候， 21 无法实现后面的checkbox全部选中。 22 我的理解：第一次点击全选，所有选中，再点击，则取消全选， 23 此时会把属性checked删除，删除后attr使用时由于checked属性不存在，故无法赋值。需要看attr和prop源代码才能知道其中的区别，学习中，详细原理可以看
http://blog.csdn.net/chaiyining007/article/details/8218038 24 */ 25 } 26 else 27 { 28 alert("bbb"); 29 $("input[name='items']").removeAttr("checked"); 30 } 31 }); 32 $("#ckNall").click(function (){ 33 $("input[name='items']").removeAttr("checked"); 34 }); 35 $("#ckAll2").click(function (){ 36 $("input[name='items']").prop("checked","checked"); 37 }); 38 $("#fanxuan").click(function(){ 39 $("input[name='items']").each(function(){ 40 if(this.checked){ 41 $(this).removeAttr("checked"); 42 } 43 else{ 44 $(this).prop("checked","checked"); 45 } 46 }); 47 48 49 }); 50 51 }); 52 53 </script> 54 </head> 55 <body> 56 <div> 57 <input type="checkbox" id="ckAll" value="全选或者全不选">全选/全不选</input> 58 <input type="checkbox" id="ck1" name="items" value="上小学">上小学</input> 59 <input type="checkbox" id="ck2" name="items" value="上中学">上中学</input> 60 <input type="checkbox" id="ck3" name="items" value="上大学">上大学</input> 61 <br/> 62 <input type="button" id="ckAll2" value="全选"/> 63 <input type="button" id="ckNall" value="全不选"/> 64 <input type="button" id="fanxuan" value="反选"/> 65 66 </div> 67 </body> 68 </html>
