快捷導(dǎo)航

js, jQuery實(shí)現(xiàn)全選、反選功能

更新時(shí)間：2017年03月08日 09:20:31 作者：虔誠_k

本文主要介紹了js, jQuery實(shí)現(xiàn)全選、反選功能的方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

js ，jq實(shí)現(xiàn)全選、反選功能：

js:思路：1.點(diǎn)擊全選按鈕實(shí)現(xiàn)，下面內(nèi)容全選，與反選 2.下面有一個(gè)沒有選中時(shí)，全選按鈕不勾選，當(dāng)全部選中時(shí)才全選。這里引入一個(gè)計(jì)數(shù)器，來判斷是否全部選中。

<!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(){
  //引入計(jì)數(shù)器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 當(dāng)前的狀態(tài)；
　　　　　　　//prop('checked',value) ,第一個(gè)值獲取屬性，第二個(gè)值：設(shè)置屬性值。prop只有一個(gè)參數(shù)時(shí)，表示獲取元素屬性。
　　　　　　　 $('#ckAll').click(function(){
　　　　　　　　　　 $('.box input').prop('checked',$(this).prop('checked'));
  });
  $('.box input').click(function(){
  //each 便利每一個(gè)元素，讓其執(zhí)行該函數(shù)
  $('.box input').each(function(){
   if(!$(this).prop('checked')){
   $('#ckAll').prop('checked',false);
   //有一個(gè)不滿足就 跳出該循環(huán)，避免執(zhí)行下面
   return false;
   }else{
   $('#ckAll').prop('checked',true);
   }
  })
  })</script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: