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;

           text-align: left;

           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{

           font-size: 12px;

           padding: 8px;

           background-color: rgb(9 60 112);

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

           margin-left: 5px;

           text-align: center;

       }

   </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>

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

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

       <li>全</li>

       <li>部</li>

   </div>

   <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>

   </div>

   <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>

       </div>

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

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

       <li><span>数量</span><span>212</span></li>

   </div>

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

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

       <li><span>数量</span><span>112</span></li>

   </div>

</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);    

              }else{

                  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();

       });