Jquery 實作click 選中checkbox 多選(或一鍵選中全部或取消全部)執行個體代碼

1.Jquery 實作click 選中checkbox 多選(或一鍵選中全部或取消全部)執行個體代碼

1.1 展示效果圖:

2.2 css 樣式:

<style>

       .bottom-block-layer-div{

           left: 48rem;

           width: 60%;

           color: #fff;

           display: inline-flex;

           position: fixed;

           bottom: 2px;

           z-index: 999;

       }

       .bottom-block-layer-li{

           width: 120px;

           box-shadow: inset 0 0 0px 0px #0081ff;

           background-color: rgba(0,3,7,0.3);

           border-left: 2px solid #072e7d;

           margin-left: 5px;

           font-size: 12px;

           text-align: center;

           font-size: 0.2rem;

       .bottom-block-layer-li li:nth-of-type(1){

           text-align: left;

           margin: 5px 5px 5px 4px;

           padding: 5px 5px 5px 0px;

       .bottom-block-layer-li li:nth-of-type(2){

           background-color: #093c70;

           padding: 8px;

           padding-left: 21px;

           color: white;

           font-weight: bold;

       .bottom-block-layer-li li,.bottom-block-layer-title li{

           list-style-type: none;

       .bottom-block-layer-li li:nth-of-type(1) span{

           position: absolute;

           top: 12px;

           margin-left: 4px;

       .bottom-block-layer-li li:nth-of-type(1) input{

           margin-left: 2px;

       .bottom-block-layer-li li:nth-of-type(2) span{

           margin-right:5px;

       .bottom-block-layer-title{

           background-color: rgb(9 60 112);

           box-shadow: inset 0 0 0px 0px #00bcd4;

   </style>

2.2 HTML 代碼:

<!--圖層-->

<div class="bottom-block-layer-div" style="z-index: 10;">

   <div class="bottom-block-layer-title">

       <li>圖</li>

       <li>層</li>

   </div>

       <li><input type="checkbox" name="" id="allCheck"  value="" style="position: relative;left: 0px;top:2px;"></li>

       <li>全</li>

       <li>部</li>

   <div class="bottom-block-layer-li">

       <li><input type="checkbox" class="input-checkbox-span"  name="" value="金毛犬"><span>金毛犬</span></li>

       <li><span>數量</span><span>12</span></li>

       <li><input type="checkbox" class="input-checkbox-span"  name="" value="泰迪犬"><span>泰迪犬</span></li>

       </div>

       <li><input type="checkbox" class="input-checkbox-span"  name="" value="阿拉斯加犬"><span>阿拉斯加犬</span></li>

       <li><span>數量</span><span>212</span></li>

       <li><input type="checkbox" class="input-checkbox-span"  name="" value="柴犬"><span>柴犬</span></li>

       <li><span>數量</span><span>112</span></li>

</div>

3.3 Jquery 代碼:

//checkbox

      var selAll = document.getElementById('allCheck'); // 全選

      var selItem = document.getElementsByClassName("input-checkbox-span");// 單個選項

      var checkedArray=[];//選中資料

       //移除取消選中值

       function fnDeleteCancelValue(value){

        return checkedArray=checkedArray.filter(function(val,index){

               if(val!=value){

                   return val;

               }

           })

       //監聽checkbox選中

       $(".input-checkbox-span").off("click").on("click",function(){

              var isChecked=this.checked;//得到目前checkbox狀态

              var getCheckedValue=this.value;//得到目前選中值

              var checkboxCount=selItem.length;//選項總數

              var checkedCount=$(".input-checkbox-span:checked").length;//選中選項總數

              if(checkedCount==checkboxCount){

                 selAll.checked = true;

              }else{

                 selAll.checked = false;

              }

              if(isChecked){

                  console.log("目前是選中:"+getCheckedValue);

                  checkedArray.push(getCheckedValue);    

                  console.log("目前是取消:"+getCheckedValue);

                  fnDeleteCancelValue(getCheckedValue);

              console.log(checkedArray);

       });

       //監聽全部

       function fnCheckedAll(){

          var ischeck = selAll.checked;

          checkedArray=[];//清空

          for(var i = 0;i<selItem.length;i++){

              selItem[i].checked = (ischeck ? true : false);

              if(ischeck){

                checkedArray.push(selItem[i].value);

          }

          console.log("目前是:"+(ischeck?"選中全部":"取消全部"));

          console.log(checkedArray);

       $("#allCheck").click(function (e){

          fnCheckedAll();