《锋利的JS》之复选框全选反选

这是《锋利的JQ》里第五章的第三个实例，直接看效果：

<!doctype html>
<html>
<head>
<title>复选框全选反选</title>
<script>
window.onload = function(){
    var checkedAll = document.getElementById("checkedAll");
    var inputs = document.getElementsByTagName("input");
    var send = document.getElementById("send");
    var items = [];
    for(var i = 0,l = inputs.length; i < l; i++ ){
        if(inputs[i].name == "items"){
            items.push(inputs[i]);
        }
    }
    
    checkedAll.onclick = function(){
        for(var i = 0,l = items.length; i < l; i++){
            items[i].checked = this.checked;
        }
    }
    
    for(var i = 0,l = items.length; i < l; i++){
        items[i].onclick = function(){
            var flag = true;
            for(var j = 0,k = items.length; j < k; j++){
                if(!items[j].checked){
                    flag = false;
                    break;
                }
            }
            if(flag){
                checkedAll.checked = true;
            }else{
                checkedAll.checked = false;
            }
        }
    }
    
   send.onclick = function(){
       var str = "你选中的是:\n";
       for(var i = 0,l = items.length; i < l; i++){
           if(items[i].checked){
               str += items[i].value + "\n";
           } 
       }
       alert(str);
   }
}
</script>
</head>
<body>
    <form method="post" action="">
        你爱好的运动是?<input type="checkbox" id="checkedAll" />全选/全不选<br/>
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <input type="button" id="send" value="提交" />
    </form>
</body>
</html>

未完待续。。。。。

posted @ 2011-05-12 17:45 肥杜阅读(235) 评论(0) 编辑收藏举报

刷新页面返回顶部

《锋利的JS》之 复选框全选反选

公告

《锋利的JS》之复选框全选反选