【Jquery】------ Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码

╰半夏微凉° 2022-09-03 00:07 170阅读 0赞

> **1.Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码**

> **1.1** **展示效果图:**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70][]

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

> 4.4 全部代码实例:
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     
>     <head>
>         
>         <meta charset="utf-8">
>         
>         <meta http-equiv="X-UA-Compatible" content="IE=edge">
>         
>         <meta name="viewport"
>             content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
>         <title></title>
>         <style>
>         
>             html,
>             body {
>                 width: 100%;
>                 height: 100%;
>                 margin: 0;
>                 padding: 0;
>                 overflow: hidden;
>             }
>         </style>
>     
>         <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>
>     </head>
>     
>     <body>
>     
>     <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>
>     <script src="jquery-3.3.1.min.js"></script>
>     <script >
>            //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();
>             });
>         
>     </script>
>     
>     </body>
>     
>     </html>
> 
>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MzY2NjU3_size_16_color_FFFFFF_t_70]: /images/20220829/8c718c60959848eb9e6ba8d8f4e4b686.png