js应用-常用全选/全部选按钮应用

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中
    //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中
    //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中
    //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.

    //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组
    //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择
    //若没有被选择, 则 name=items 的 checkbox 都要取消选择
    //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择
    //checked = false 取消选择. 

    //还需要给每个  name=items 的 checkbox 加响应函数
    //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.
    //若都被选择: 则使  #checkedAll_2 被选择
    //若没有都被选择: 则使  #checkedAll_2 取消选择

    window.onload = function(){
        document.getElementById("checkedAll_2").onclick = function(){

            var flag = this.checked;
            var items = document.getElementsByName("items");

            for(var i = 0; i < items.length; i++){
                items[i].checked = flag;
            }

        }

        var items = document.getElementsByName("items");

        for(var i = 0; i < items.length; i++){
            items[i].onclick = function(){
                //记录有多少个 items 被选中了
                var number = 0;
                for(var j = 0; j < items.length; j++){
                    if(items[j].checked){
                        number++;
                    }
                }

                document.getElementById("checkedAll_2").checked = 
                    (items.length == number);
            }
        }

        document.getElementById("CheckedAll").onclick = function(){
            for(var i = 0; i < items.length; i++){
                items[i].checked = true;
            }
        }

        document.getElementById("CheckedNo").onclick = function(){
            for(var i = 0; i < items.length; i++){
                items[i].checked = false;
            }
        }

        document.getElementById("CheckedRev").onclick = function(){
            for(var i = 0; i < items.length; i++){
                items[i].checked = !items[i].checked;
            }
        }

        document.getElementById("send").onclick = function(){
            for(var i = 0; i < items.length; i++){
                if(items[i].checked){
                    alert(items[i].value);
                }
            }
        }
    }


</script>
</head>
<body>

    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选 

        <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="乒乓球" />乒乓球
        <br /> <input type="button" id="CheckedAll" value="全　选" /> <input
            type="button" id="CheckedNo" value="全不选" /> <input type="button"
            id="CheckedRev" value="反　选" /> <input type="button" id="send"
            value="提　交" />
    </form>

</body>
</html>

---

效果图: