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