1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="../js/jquery1.8.3.min.js"></script> 6 <title>表单操作-checkbox</title> 7 <style> 8 *{margin:10px} 9 </style> 10 </head> 11 <body> 12 <form method="post" action=""> 13 你爱好的运动是？ 14 <br/> 15 <input type="checkbox" name="items" value="足球" id="zq"/><label for="zq"> 足球</label> 16 <input type="checkbox" name="items" value="篮球" id="lq"/><label for="lq"> 篮球</label> 17 <input type="checkbox" name="items" value="羽毛球" id="ymq"/><label for="ymq">羽毛球</label> 羽毛球 18 <input type="checkbox" name="items" value="乒乓球" id="ppq"/><label for="ppq">乒乓球</label> 19 <br/> 20 <input type="button" id="CheckedAll" value="全 选"/> 21 <input type="button" id="CheckedNo" value="全不选"/> 22 <input type="button" id="CheckedRev" value="反 选"/> 23 24 <input type="button" id="send" value="提 交"/> 25 </form> 26 <script> 27 $(function(){ 28 //全选 29 $("#CheckedAll").click(function(){ 30 $("input[name=items]").attr("checked",true); 31 }); 32 //全不选 33 $("#CheckedNo").click(function(){ 34 $("input[name=items]").attr("checked",false); 35 }); 36 37 //反选 38 $("#CheckedRev").click(function(){ 39 //checkbox 40 var checkElem = $("input[name=items]"); 41 /**方法一： 42 for(var i = 0; i<checkElem.length;i++){ 43 checkElem[i].checked = !checkElem[i].checked; 44 } 45 **/ 46 //方法二： 47 checkElem.each(function(){ 48 this.checked = !this.checked; 49 }); 50 /**方法三： 51 checkElem.each(function(){ 52 if($(this).attr("checked")){ 53 $(this).attr("checked",false); 54 }else{ 55 $(this).attr("checked",true); 56 } 57 }); 58 **/ 59 }); 60 }) 61 </script> 62 </body> 63 </html>