순수한 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;
          }
          
       }
    }
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 순수한 자 바스 크 립 트 가 선택 상자 의 전체 선택 과 반 선택 기능 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다!

좋은 웹페이지 즐겨찾기