ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-08-04 13:31:15  阅读:129  来源: 互联网

标签:Jquery layer checkbox bottom li 选中 5px var block


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

4.4 全部代码实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <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>

 

标签:Jquery,layer,checkbox,bottom,li,选中,5px,var,block
来源: https://blog.csdn.net/qq_38366657/article/details/119381920

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有