js实现复选框的全选全不选和反选
Posted Tynam Yang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现复选框的全选全不选和反选相关的知识，希望对你有一定的参考价值。
js实现复选框的全选、全不选和反选
主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态
实现代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>复选框的选择</title> 6 <style> 7 #btn{ 8 margin: 5px auto; 9 } 10 #btn>input{ 11 font-size: 16px; 12 color: #fff; 13 background-color: rgb(110, 34, 182); 14 outline: none; 15 } 16 #city{ 17 background-color: aqua; 18 } 19 </style> 20 21 <script> 22 window.onload=function(){ 23 24 var obt1 = document.getElementById(\'btn1\'); 25 var obt2 = document.getElementById(\'btn2\'); 26 var obt3 = document.getElementById(\'btn3\'); 27 var ocity = document.getElementById(\'city\'); 28 var oinput = ocity.getElementsByTagName(\'input\'); 29 30 obt1.onclick=function(){ 31 for(var i=0;i<oinput.length;i++) 32 { 33 oinput[i].checked=true; 34 } 35 } 36 obt2.onclick=function(){ 37 for(var i=0;i<oinput.length;i++) 38 { 39 oinput[i].checked=false; 40 } 41 } 42 obt3.onclick=function(){ 43 for(var i=0;i<oinput.length;i++) 44 { 45 if(oinput[i].checked==false) 46 { 47 oinput[i].checked=true; 48 }else{ 49 oinput[i].checked=false; 50 } 51 } 52 } 53 } 54 </script> 55 </head> 56 <body> 57 <div id="btn"> 58 <input type="button" id="btn1" value="全选"> 59 <input type="button" id="btn2" value="全不选"> 60 <input type="button" id="btn3" value="反选"> 61 </div> 62 <div id="city"> 63 <input type="checkbox">北京<br> 64 <input type="checkbox">上海<br> 65 <input type="checkbox">广州<br> 66 <input type="checkbox">深圳<br> 67 <input type="checkbox">武汉<br> 68 </div> 69 </body> 70 </html>
结果
以上是关于js实现复选框的全选全不选和反选的主要内容，如果未能解决你的问题，请参考以下文章