【javascript】checkbox——类似邮箱全选功能

现在很多邮箱都有全选的功能，我也做了个练练手。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
    <input type="checkbox" name="btn" id="btn"/><label for="btn">全选</label><br/>
    <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/>
    <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/>
    <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/>
    <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/>
    <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/>
    <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/>
    <input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/>
    <input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/>
    <input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/>
    <input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    var oInput = document.getElementsByName('choose');
    
    for(var i = 0;i < oInput.length; i++){
        oInput[i].onclick = function(){
            if(this.checked){
                var allCheck = true;
                for(var j = 0;j < oInput.length; j++){
                    if(!(oInput[j].checked)){
                        allCheck = false;
                    }
                };
                if(allCheck){
                    oBtn.checked = true;
                }else{
                    oBtn.checked = false;
                }
            }else{
                oBtn.checked = false;
            }
        }
    };
    
    //全选
    oBtn.onclick = function(){
        if(oBtn.checked){
            for(var i = 0;i < oInput.length; i++){
                oInput[i].checked = true;
            }
        } else {
            for(var i = 0;i < oInput.length; i++){
                oInput[i].checked = false;
            }
        }
    };
}
</script>

只做了全选的功能，反选的功能还没有做，以后补上。由于水平有限，感觉以上代码还可以简化，求指点。

posted @ 2012-11-27 11:40  朱羽佳  阅读(529)  评论(0)  编辑  收藏  举报
回顶部