码迷,mamicode.com
首页 > Web开发 > 详细

js制作全选 反选 不选

时间:2016-01-01 18:47:39      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html >
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    
    </style>
    
    <script>
    window.onload=function (){
        var aBtn1=document.getElementById("btn1");
        var aBtn2=document.getElementById("btn2");
        var aBtn3=document.getElementById("btn3");
        var oDiv=document.getElementById("s1");
        var s=oDiv.getElementsByTagName("input");
        aBtn1.onclick=function (){      //全选
            for(var i=0;i<s.length;i++){
        s[i].checked=true;
        }
        
    }
        aBtn2.onclick=function (){     //全不选
            for(var i=0;i<s.length;i++){
        s[i].checked=false;
        }
        
    }
        aBtn3.onclick=function (){   //反选
            for(var i=0;i<s.length;i++){
         if(s[i].checked==false){
             s[i].checked=true;
         }else{
             s[i].checked=false;
         }
        }
        
    }
        }
    </script>
    <body>
    <input id="btn1" type="button" value="全选" />
    <input id="btn2" type="button" value="不选" />
    <input id="btn3" type="button" value="反选" />
    
    <div id="s1">
        <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/qq928252089/p/5093523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!