js实现复选框的全选、全不选和反选
2018-10-23 03:06:03来源:博客园 阅读 ()
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>
结果
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- NiftyCube实现圆角边框的方法 2020-03-20
- JS实现标签页切换效果 2020-03-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash