js,jQuery 전체 선택,반 선택 기능 실현

js,jq 는 전체 선택,반 선택 기능 을 실현 합 니 다.
js:사고:1.전체 선택 단 추 를 누 르 면 이 루어 집 니 다.아래 내용 은 모두 선택 하고 반대 선택 2.아래 에 선택 되 지 않 은 것 이 있 을 때 전체 선택 단 추 를 선택 하지 않 습 니 다.모두 선택 할 때 만 선택 합 니 다.모든 선택 여 부 를 판단 하기 위해 계수 기 를 도입 합 니 다.


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
   <input type="checkbox" name="allchoose" id="box" onclick="chk()"/>
 <div id="lower">
    <input type="checkbox" name="apple" id="apple"/>
    <input type="checkbox" name= "banner" id="banner" />
    <input type="checkbox" name="origin" id="origin"/>
 </div>
 <script type="text/javascript">
  var box = document.getElementById("box");
  var lb = document.getElementById("lower");
  var lber = lb.getElementsByTagName("input");
 //  ，  
 box.onclick = function(){
  if(this.checked){
  for(var i=0;i<lber.length;i++){
   lber[i].checked = true;
  }
  }else{
  for(var i=0;i<lber.length;i++){
   lber[i].checked = false;
  }
  }
 }
 //     ，      
 for(var i=0;i<lber.length;i++){
  lber[i].onclick = function(){
  //     sum
  var sum = 0;
  for(var j=0;j<lber.length;j++){
   if(lber[j].checked){
   sum += 1;
   if(sum == lber.length){
    box.checked = true;
   } else {
    box.checked = false;
   }
   }
  }
  }
 }
 </script>
 </body>
</html>

jq,jQuery 를 사용 하기 전에 jq 를 먼저 도입 합 니 다.


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <input type="checkbox" value="  " id="ckAll"/>  </br>
 <div class="box">
  <input type="checkbox" value="  " id="apple"/>  
  <input type="checkbox" value="  " id="bann"/>  
  <input type="checkbox" value="  " id="origin"/>  
 </div> 
 <script src="js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
　　　　　　　//    .box input      checked = ckAll      ；
　　　　　　　//prop('checked',value) ,        ，    ：     。prop       ，        。
　　　　　　　 $('#ckAll').click(function(){
　　　　　　　　　　 $('.box input').prop('checked',$(this).prop('checked'));
  });
  $('.box input').click(function(){
  //each        ，       
  $('.box input').each(function(){
   if(!$(this).prop('checked')){
   $('#ckAll').prop('checked',false);
   //             ，      
   return false;
   }else{
   $('#ckAll').prop('checked',true);
   }
  })
  })</script>
 </body>
</html>

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

js,jQuery 전체 선택,반 선택 기능 실현

좋은 웹페이지 즐겨찾기