js全选按钮实现

全选功能：

勾选或者取消全选按钮，其他按钮自动全部选中或者全部取消。
其他按钮未全部被选中时，全选按钮不勾选。
其他按钮全部被选中时，全选按钮自动勾选。

页面内容：

<div>
        <ul>
            <li><input type="checkbox" id="check_all"><label for="check_all">全选</label></li>
            <li><input type="checkbox" class="check_one"></li>
            <li><input type="checkbox" class="check_one"></li>
            <li><input type="checkbox" class="check_one"></li>
            <li><input type="checkbox" class="check_one"></li>
        </ul>
    </div>

简单样式：

li {
            width: 100px;
            height: 30px;
            border: 1px solid red;
            margin-bottom: 10px;
            list-style: none;
            text-align: center;
            line-height: 30px;
        }

js实现部分：详细注释

// 获取全选按钮
        var check_all = document.getElementById("check_all");
        // 获取其他按钮列表
        var ul_li_chkboxs = document.getElementsByClassName("check_one");
        //  为全选按钮绑定单击事件
        check_all.onclick = function() {
                // 遍历其他按钮
                for (var i = 0; i < ul_li_chkboxs.length; i++) {
                    // 使每一个其他按钮的状态跟随全选按钮
                    ul_li_chkboxs[i].checked = this.checked;
                }
            }
            // 遍历其他按钮
        for (var i = 0; i < ul_li_chkboxs.length; i++) {
            // 为每一个其他按钮绑定单击事件
            ul_li_chkboxs[i].onclick = function() {
                // 遍历其他按钮
                for (var j = 0; j < ul_li_chkboxs.length; j++) {
                    // 如果有任何一个按钮未被选中
                    if (ul_li_chkboxs[j].checked == false) {
                        // 全选按钮不选中
                        check_all.checked = false;
                        // 跳出循环
                        break;
                    }
                    // 如果遍历结束后仍未break跳出循环，说明其他按钮全被选中，就选中全选按钮
                    check_all.checked = true;
                }
            }
        }