全选按钮的实现js

利用js实现全选按钮;包括点击普通按钮后，全选按钮是否选中的变化。

代码实现

body部分：

<div class="item">
        <label for="">爱好</label>
        <input type="checkbox" id="chooseAll" value="全选">全选/全不选
        <div class="choice">
            <input type="checkbox" name="hobbyies" value="篮球">篮球
            <input type="checkbox" name="hobbyies" value="排球">排球
            <input type="checkbox" name="hobbyies" value="羽毛球">羽毛球
            <input type="checkbox" name="hobbyies" value="电影">电影
            <!-- checkbox多选 -->
        </div>
    </div>

js代码部分:

<script>
        var btn = document.getElementById("chooseAll");
        var items = document.getElementsByName("hobbyies")
        // 全选按钮点击
        btn.onclick = function () {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = this.checked;
            }
        };
        //普通按钮点击
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function () {
                for (var j = 0; j < items.length; j++) {
                    btn.checked=true;
                    if(!items[j].checked){
                        btn.checked=false;
                        break;//结束循环        
                    }
                    
                }
            }
        }


    </script>