純javascript實現選擇框的全選與反選

 HTML部分

  <div id="wrap_input_box" >
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            <input type="checkbox"><br>
            
      </div>
      <label for="olabel">選擇全部 一鍵上路<input type="checkbox" id= 'all'></label> 

js部分

  var oinput = document.getElementById('all');
        //  var oinput_s = document.getElementsByTagName('input');
         var oinput_s = document.querySelectorAll('#wrap_input_box>input');
        //  console.log(oinput_s[6]);
        // 先設置點擊全選按鈕後 實現所有的選擇標簽顯示選擇     取消點擊後  取消所有標簽選擇
        oinput.onclick = function(){
            if (this.checked){
                for (var i =0;i<oinput_s.length;i++){
                    oinput_s[i].checked=true;
                }
            }else{
                for (var i =0;i<oinput_s.length;i++){
                    oinput_s[i].checked=false;
                }
            }
        }
        // 下麵設置的是   每個小標簽如果在全選狀態下取消選擇其中的某一個 對應的按鈕的狀態會變為沒有全選
                // 給每個小選擇標簽設置綁定點擊事件
        for(var j = 0;j<oinput_s.length;j++){
             oinput_s[j].onclick = function (){
                   //定義一個標誌位  這個標誌位 用來判斷後面的選擇按鈕的狀態
                   var flag = true;
                   //遍歷每個小選擇標簽    判斷 如果每一個小標簽是非選擇狀態   將標誌位改為 false 狀態 即對應為未選擇
                   for (k=0;k<oinput_s.length;k++){
                       if(!oinput_s[k].checked){
                           flag=false;
                           break;
                       }
                       
                   }

                   if(flag){
                       oinput.checked=true;
                   }else{
                       oinput.checked=false;
                   }
                   
             }
        }