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

2024-01-24 17:29:46

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>

码农公寓

相关文章