关于全选

全选的几个要求

1、点击全选即选择所有选项并更改全选为取消，且为选中状态；

2、点击取消即取消所有选项并更改取消为全选，且为未选中状态；

3、只要有一个选项未选中，就更改取消为全选，且为未选中状态；

4、只要所有选项全部选中，就更改全选为取消，且为选中状态。

HTML代码

<input type="checkbox" id="checkALL" /><span class="dohovertree" id="dohovertree">全选</span>

仅在此展示一个选择项，选项的name值都是一样的。

<input type="checkbox" name="staffId" id="staffID"/>

 JavaScript代码

　　　　/**
         * 全选和取消
         * @author ywy
         * @date 2017/12/07
         */
        function selectAndClearAll(){
            var checkboxs = document.getElementsByName("staffId");
            document.getElementById("checkALL").onclick=function(){
                if(this.checked==true){//全部选中并显示为取消
                    for(var i=0;i<checkboxs.length;i++){
                        checkboxs[i].checked=true;
                    }
                    document.getElementById("dohovert"+"ree").innerHTML="取消";
                }else{//全部取消并显示为全选
                    for(var i=0;i<checkboxs.length;i++){
                        checkboxs[i].checked=false;
                    }
                    document.getElementById("dohovertree").innerHTML="全选";
                }
            }
            
            for( var i = 0; i < checkboxs.length; i++){
                checkboxs[i].onclick=function(){
                    /**只要有一个没有选中 就设置全选为未选中状态并显示为全选**/
                    if(!this.checked){
                        document.getElementById("checkALL").checked = false;
                        document.getElementById("dohovertree").innerHTML = "全选";
                    }
                    /**只要全部选中 就设置全选为选中状态并显示为取消**/
                    var flag = true;
                    for(var i=0;i<checkboxs.length;i++){
                        if(!checkboxs[i].checked){
                            flag = false;
                            break;
                        }
                    }
                    if(flag){
                        document.getElementById("checkALL").checked = true;
                        document.getElementById("dohovertree").innerHTML = "取消";
                    }
                };
            }
        }

在你需要的地方调用selectAndClearAll()方法即可~ 完结 撒花~~