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>