1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>請輸入關鍵詞</title>
6 <script type="text/javascript" src="js/jquery.min.js"></script>
7 </head>
8 <body>
9 <input type="checkbox" class="ipt">歌曲1<br>
10 <input type="checkbox" class="ipt">歌曲2<br>
11 <input type="checkbox" class="ipt">歌曲3<br>
12 <input type="checkbox" class="ipt">歌曲4<br>
13 <input type="checkbox" class="ipt">歌曲5<br>
14 <input type="button" class="btn1" value="全選">
15 <input type="button" class="btn2" value="全不選">
16 <input type="button" class="btn3" value="反選">
17 <script type="text/javascript">
18 $(function(){
19 $(".btn1").click(function(){
20 $("input:checkbox").attr("checked",true);
21 });
22 $(".btn2").click(function(){
23 $("input:checkbox").attr("checked",false);
24 });
25 $(".btn3").click(function(){
26 $("input:checkbox").each(function(){
27 $(this).attr("checked",!$(this).attr("checked"));
28 })
29 });
30 })
31 </script>
32 </body>
33 </html> javascript實作全選、全不選、反選.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>反選</title>
6 <script type="text/javascript">
7
8
9 //提示: 事件需要加給 #checkedAll_2, 擷取 name=items 的 checkbox 數組
10 //判斷是否被選中, 若被選擇, 則 name=items 的 checkbox 都要被選擇
11 //若沒有被選擇, 則 name=items 的 checkbox 都要取消選擇
12 //根據是否存在 checked 屬性來判斷是否被選擇, 可以使其 checked = true 被選擇
13 //checked = false 取消選擇.
14
15 //還需要給每個 name=items 的 checkbox 加響應函數
16 //判斷 name=items 的 checkbox 是否都被選中: 選擇的個數和總個數是否相等.
17 //若都被選擇: 則使 #checkedAll_2 被選擇
18 window.onload=function(){
19 //需求: 若 #checkedAll_2 被選中, 則 name=items 的 checkbox 都被選中
20 //若 #checkedAll_2 取消選中, 則 name=items 的 checkbox 都取消選中
21 //若 name=items 的 checkbox 都被選中, 則 #checkedAll_2 的 checkbox 也被選中
22 //若 name=items 的 checkbox 有一個沒有被選中, 則 #checkedAll_2 取消選擇.
23 document.getElementById("checkedAll_2").onclick=function(){
24 var flag=this.checked;
25 var items=document.getElementsByName("items");
26 for(var i=0;i<items.length;i++){
27 items[i].checked=flag;
28 }
29 }
30 //給每個item添加事件
31 var items=document.getElementsByName("items");
32 for(var i=0;i<items.length;i++){
33 items[i].onclick=function(){
34 //記錄有多少個items被選中了
35 var number=0;
36 for(var j=0;j<items.length;j++){
37 if(items[j].checked){
38 number++;
39 }
40 }
41 document.getElementById("checkedAll_2").checked=(items.length==number);
42 }
43 }
44 //全選
45 document.getElementById("CheckedAll").onclick = function(){
46 for(var i = 0; i < items.length; i++){
47 items[i].checked = true;
48 }
49 }
50 //全不選
51 document.getElementById("CheckedNo").onclick = function(){
52 for(var i = 0; i < items.length; i++){
53 items[i].checked = false;
54 }
55 }
56 //反選
57 document.getElementById("CheckedRev").onclick = function(){
58 for(var i = 0; i < items.length; i++){
59 items[i].checked = !items[i].checked;
60 }
61 }
62 //送出
63 document.getElementById("send").onclick = function(){
64 for(var i = 0; i < items.length; i++){
65 if(items[i].checked){
66 alert(items[i].value);
67 }
68 }
69 }
70 </script>
71 </head>
72 <body>
73 <form method="post" action="">
74 你愛好的運動是？<input type="checkbox" id="checkedAll_2" />全選/全不選 <br/>
75 <input type="checkbox" name="items" value="足球" />足球
76 <input type="checkbox" name="items" value="籃球" />籃球
77 <input type="checkbox" name="items"m value="羽毛球" />羽毛球
78 <input type="checkbox" name="items" value="乒乓球" />乒乓球<br/>
79 <input type="button" id="CheckedAll" value="全 選" />
80 <input type="button" id="CheckedNo" value="全不選" />
81 <input type="button" id="CheckedRev" value="反 選" />
82 <input type="button" id="send" value="提 交" />
83 </form>
84 </body>
85 </html> 轉載于:https://www.cnblogs.com/nifengs/p/4800726.html
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)