码迷,mamicode.com
首页 > 其他好文 > 详细

全选,不选,反选

时间:2016-05-27 10:57:31      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{border-top:#333 10px solid;}
</style>
<script>
window.onload=function(){
    var oBtn=document.getElementById(btn1);
    var oBtn2=document.getElementById(btn2);
    var oBtn3=document.getElementById(btn3);
    var oDiv=document.getElementById(div1);
    var aIpt=oDiv.getElementsByTagName(input);
    //全选
    oBtn.onclick=function(){
        for(var i=0;i<aIpt.length;i++){
            aIpt[i].checked=true;    
        }
    };
    //不选
    oBtn2.onclick=function(){
        for(var i=0;i<aIpt.length;i++){
            aIpt[i].checked=false;    
        }
    };
    
    //反选
    oBtn3.onclick=function(){
        for(var i=0;i<aIpt.length;i++){
            aIpt[i].checked=!aIpt[i].checked;
        }
    };
};
</script>
</head>

<body>

<input type="button" value="全选" id="btn1">
<input type="button" value="不选" id="btn2">
<input type="button" value="反选" id="btn3">


<div id="div1">
    <input type="checkbox" checked="true"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
    <input type="checkbox"><br>
</div>


</body>
</html>

 

全选,不选,反选

标签:

原文地址:http://www.cnblogs.com/Xuman0927/p/5533640.html

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