进行单选的全选和反选
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选择框</title> 6 <script type="text/javascript"> 7 function checkAll(){ 全选 8 var qxchecked=document.getElementById("qx").checked; 9 var noodle=document.getElementsByName("noodle"); 10 for (var i = 0; i < noodle.length; i++) { 11 noodle[i].checked=qxchecked; 12 } 13 } 14 15 function checkNot(){ 反选 16 var noodle=document.getElementsByName("noodle"); 17 for (var i = 0; i < noodle.length; i++) { 18 noodle[i].checked=!noodle[i].checked; 19 } 20 } 21 22 </script> 23 24 </head> 25 <body> 26 27 <input type="checkbox" id="qx" onclick="checkAll()">全选/全不选 28 <input type="checkbox" id="fx" onclick="checkNot()">反选<br/> 29 30 <input type="checkbox" name="noodle" value="1">兰州拉面<br/> 31 <input type="checkbox" name="noodle" value="2">河南烩面<br/> 32 <input type="checkbox" name="noodle" value="3">广州细蓉<br/> 33 <input type="checkbox" name="noodle" value="4">陕西臊子面<br/> 34 35 36 </body> 37 </html>
利用jQuery实现全选和反选
1、全选
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jquery_Demo6</title> 6 <script type="text/javascript" src="js/jquery-1.8.2.js" ></script> 7 </head> 8 <body> 9 <input type="checkbox" id="qx" >全选/全不选 10 <input type="checkbox" id="fx" >反选 11 <br> 12 <input type="checkbox" name="noodle" value="1" >兰州拉面<br> 13 <input type="checkbox" name="noodle" value="2" >河南烩面<br> 14 <input type="checkbox" name="noodle" value="3" >广州细蓉<br> 15 <input type="checkbox" name="noodle" value="4" >陕西噪子面<br> 16 <input type="checkbox" name="noodle" value="5" >康帅傅牛肉面<br> 17 </body> 18 <script type="text/javascript"> 19 //全选/全不选第一种： 20 $(function(){ 21 // $("#qx").click(function(){ 22 // var flag=this.checked; 23 // $("input[name='noodle']").attr("checked",flag); 24 // }); 25 26 //第二种： 27 $("#qx").click(function(){ 28 var flag=this.checked; 29 var noodles=$("input[name='noodle']"); 30 noodles.each(function(){ 31 // alert(this);//获取的数组中每一个对象 32 $(this).attr("checked",flag); 33 }); 34 }); 35 36 //第三种： 37 $("#qx").click(function(){ 38 var flag=this.checked; 39 var noodles=$("input[name='noodle']"); 40 noodles.each(function(i,v){ 41 //i数组的索引值 v就是this指当前对象 42 $(v).attr("checked",flag); 43 //$(v).prop("checked",flag); 也可以执行 44 }) 45 }); 46 47 //反选 48 $("#fx").click(function(){ 49 $("input[name='noodle']").each(function(){ 50 var flag=$(this).prop("checked"); 51 $(this).prop("checked",!flag); 52 }); 53 }); 54 }); 55 </script> 56 </html>