javaScript_Demo 全选和反选单选框

进行单选的全选和反选

 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()">全选/全不选&nbsp;&nbsp;&nbsp;
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"  >全选/全不选 &nbsp; &nbsp;
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>

 

posted @ 2018-09-05 19:29  echola_mendes  阅读(912)  评论(0)  编辑  收藏  举报