首页 > Web开发 > 详细

纯js写复选框的全选,全部选,反选

时间:2016-01-20 21:00:22      阅读:158      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function(){
                var obtn1 = document.getElementById(btn1);
                var obtn2 = document.getElementById(btn2);
                var obtn3 = document.getElementById(btn3);
                var odiv = document.getElementById(div1);
                var ocheck = odiv.getElementsByTagName(input);
                
                obtn1.onclick = function(){                //全选
                    for(var i=0;i<ocheck.length;i++){
                        ocheck[i].checked = true;
                    }
                };
                
                obtn2.onclick = function(){                //不选
                    for(var i=0;i<ocheck.length;i++){
                        ocheck[i].checked = false;
                    }
                };
                
                obtn3.onclick = function(){                             //反选
                    for(var i=0;i<ocheck.length;i++){
                        ocheck[i].checked = !ocheck[i].checked;
                    }
                };
            }
        </script>
 //代码如下, 
</head> <body> <input type="button" id="btn1" value="全选" /> <input type="button" id="btn2" value="不选" /> <input type="button" id="btn3" value="反选" /> <div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkbox" /><br /> </div> </body> </html>

 

纯js写复选框的全选,全部选,反选

原文:http://www.cnblogs.com/shineda/p/5146408.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!