全选练习-原生版和jQuery

今天来做一些练习，做全选练习

原生版的实现：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
    </head>
    <script type="text/javascript">
        window.onload = function(){
            var items = document.getElementsByName("items");

            var checkedAllBox = document.getElementById("checkedAllBox");
            //全选
            var checkedAllBtn = document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick = function(){

                for(var i = 0; i<items.length;i++){
                    items[i].checked = true;
                }
                //更新全选和全不选
                checkedAllBox.checked = true;
            }
            //全不选
            var checkedNoBtn = document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick = function(){
                for(var i = 0; i<items.length;i++){
                    items[i].checked = false;
                }
                //更新全选和全不选
                checkedAllBox.checked = false;
            }
            //反选
            var checkedRevBtn = document.getElementById("checkedRevBtn");
            checkedRevBtn.onclick = function(){

                for(var i = 0; i<items.length;i++){
                    items[i].checked = !items[i].checked;
                    if (!items[i].checked) {
                        checkedAllBox.checked = false;
                    }
                }
            }
            //提交
            var sendBtn = document.getElementById("sendBtn");
            sendBtn.onclick = function(){
                for(var i = 0; i<items.length;i++){
                    if(items[i].checked){
                        alert(items[i].value)
                    }
                }
            }
            //通过点击全选和全不选，items也选中
            checkedAllBox.onclick = function(){
                for(var i =0;i<items.length;i++){
                    items[i].checked = this.checked;
                }
            }
            //通过点击items，如果有全选则全选、全不选也出现
            for (var i = 0; i < items.length; i++) {
                items[i].onclick = function(){
                    checkedAllBox.checked = true;

                    for(var j =0;j<items.length;j++){
                    if(!items[j].checked){
                        checkedAllBox.checked = false;
                        break
                    }
                }
                }
            }
        }
    </script>

    <body>

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

            <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="checkedAllBtn" value="全　选" />
            <input type="button" id="checkedNoBtn" value="全不选" />
            <input type="button" id="checkedRevBtn" value="反　选" />
            <input type="button" id="sendBtn" value="提　交" />
        </form>
    </body>

</html>

功能说明:
1. 点击'全选': 选中所有爱好
2. 点击'全不选': 所有爱好都不勾选
3. 点击'反选': 改变所有爱好的勾选状态
4. 点击'提交': 提示所有勾选的爱好
5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态

　　　　　　　　$(function(){
                var $items = $(":checkbox[name='items']");
                var $checkedAllBox = $("#checkedAllBox");
                //1. 点击'全选': 选中所有爱好
                $("#checkedAllBtn").click(function(){

                //$items.each(function(){
                //this.checked = true;
                //})
                ////全选/全不选选项
                //$checkedAllBox[0].checked = true;
                $items.prop("checked",true);
                $checkedAllBox.prop("checked",true);
                });

                //2. 点击'全不选': 所有爱好都不勾选
                $("#checkedNoBtn").click(function(){
                    $items.prop("checked",false);
                    $checkedAllBox.prop("checked",false);
                });

                //3. 点击'反选': 改变所有爱好的勾选状态
                $("#checkedRevBtn").click(function(){
                    $items.each(function(){
                        this.checked = !this.checked;
                    })
                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
                });

                //4. 点击'提交': 提示所有勾选的爱好
                $("#sendBtn").click(function(){
                    $items.filter(':checked').each(function () {
                      alert(this.value)
                    })
                });
                //5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
                $checkedAllBox.click(function(){

                    $items.prop("checked",this.checked);
                });

                //6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
                $items.click(function(){
                    $checkedAllBox.prop("checked",$items.filter(":not(:checked)").length===0)
                })

            })