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

發(fā)布時間：2021-06-24 14:52:06 來源：億速云閱讀：180 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)js, jQuery如何實現(xiàn)全選、反選功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

js:思路：1.點擊全選按鈕實現(xiàn)，下面內(nèi)容全選，與反選 2.下面有一個沒有選中時，全選按鈕不勾選，當全部選中時才全選。這里引入一個計數(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(){
  //引入計數(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 當前的狀態(tài)；
　　　　　　　//prop('checked',value) ,第一個值獲取屬性，第二個值：設(shè)置屬性值。prop只有一個參數(shù)時，表示獲取元素屬性。
　　　　　　　 $('#ckAll').click(function(){
　　　　　　　　　　 $('.box input').prop('checked',$(this).prop('checked'));
  });
  $('.box input').click(function(){
  //each 便利每一個元素，讓其執(zhí)行該函數(shù)
  $('.box input').each(function(){
   if(!$(this).prop('checked')){
   $('#ckAll').prop('checked',false);
   //有一個不滿足就 跳出該循環(huán)，避免執(zhí)行下面
   return false;
   }else{
   $('#ckAll').prop('checked',true);
   }
  })
  })</script>
 </body>
</html>

感謝各位的閱讀！關(guān)于“js, jQuery如何實現(xiàn)全選、反選功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

js, jQuery如何實現(xiàn)全選、反選功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

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