【Jquery】------ Jquery实现Checkbox多选并获取值，选中全部，取消全部的实例代码展示

已于 2022-02-16 13:26:29 修改
阅读量947 收藏 2
点赞数 1
分类专栏： # HTML5 # JavaScript # Jquery 文章标签： javascript jquery css3 checkbox 多选
于 2021-08-04 13:26:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38366657/article/details/119381920
版权
JavaScript 同时被 3 个专栏收录
59 篇文章 2 订阅
订阅专栏
HTML5
16 篇文章 0 订阅
订阅专栏
Jquery
16 篇文章 0 订阅
订阅专栏

1.Jquery实现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>

皮皮冰要做大神
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery实现全选、反选、取消全部等操作(复选框checkbox)
m0_61549984的博客
04-17 1317
this.checked){//一旦有一个未选中，则全选按钮 设置不选中。//将全选框的checked属性设置为false，也就是不选中全选框。//当前控件是选中的则设置为不选中，当前控件未选中的则设置为选中。$(this).parent().parent()是祖父节点tr。//选择class="userid"的控件，设置全部都不选中。//选择class="userid"的控件，让全部都选中。//选择class="userid"的控件，并执行循环。//选择class="userid"的控件。
jQuery生成SKU表格实例代码.zip
07-11
脚本简介jQuery生成SKU表格实例代码是一款仿淘宝商品发布动态生成SKU表格实例代码。 <div class="demo-title">淘宝商户端发布商品时,动态生成SKU表格的实例 <li is_required='1' propid='1' sku-type-name="存储...
JQuery带checkbox多选的下拉列表
08-11
JQuery带checkbox多选的下拉列表,功能非常强大，浏览器兼容性也很强, 浏览器兼容性如下： IE 7+ Chrome 8+ Firefox 10+ Safari 3+ Opera 10.6+ 调用非常强大，扩展性也很强
用Jquery获取checkbox多个选项
weixin_33739523的博客
08-23 627
 1,下拉框: var cc1   = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格) var cc2 = $('.formc select[@name="country"]').val();   //得到下拉菜单的选中项的值 var cc3 = $('.for...
Jquery实现checkbox多选
Semine_1126的博客
10-16 1643
var checkboxVals = ""; //遍历选中的选项 $(".rig[type='checkbox']").each(function(){ var checkFlag = false; //选中状态判断 var val = $(this).attr("value"); //获取当前选中框的值 $(this).click(function(){ /
jQuery操作checkBox(多选框)
sunfeilong1993的专栏
08-09 2132
问题：工作中要用到jQuery操作多选框(checkbox)的知识，就把以前记录及笔记找了出来直接用，但是问题出现了，取消选择之后，再次选中指定的多选框，用浏览器看（F12）是加上了checked属性，但是页面显示没有选中（没有打勾），这里把解决问题的方法总结一下。
jQuery获取checkbox选中的值
10-22
jquery checkbox选择器在程序开发中经常会用到，接下来通过实例代码给大家介绍jquery获取checkbox选中的值，需要的朋友参考下
JQuery-zTree-v2.6.rar_Java 8_jquery tree_jquery-ztree-2.6.js_jqu
09-19
2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 5、支持多种事件响应及反馈 6、支持 Tree 的节点移动、编辑、删除 7、支持极其灵活的 checkbox...
jquery获取一组checkbox的值(实例代码)
10-26
使用jquery获取一组checkbox的值实例代码。需要的朋友可以过来参考下，希望对大家有所帮助
JQuery点击行tr实现checkBox选中的简单实例
10-22
下面小编就为大家带来一篇JQuery点击行tr实现checkBox选中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery实现checkbox全选、反选及删除等操作的方法详解
10-16
主要介绍了jQuery实现checkbox全选、反选及删除等操作的方法,结合实例形式形式详细分析了jQuery针对checkbox多选按钮常见批量操作相关实现技巧,需要的朋友可以参考下
HTML复选框美化，Jquery模拟多选框(checkbox)
02-06
改变浏览自带的复选框架样式，图片可以自己定义。直接替换即可。
jquery插件实现下拉多选checkbox的效果
11-20
jquery-ui-multiselect实现多选下拉框的效果，支持下拉多选的一个小demo
jQuery实现点击行选中或取消CheckBox的方法
10-21
主要介绍了jQuery实现点击行选中或取消CheckBox的方法,涉及jQuery针对页面元素的循环遍历与属性操作相关技巧,需要的朋友可以参考下
jquery的checkbox 多选全选反选取值
小耳朵晨晨
07-02 225
效果： html部分 <ul> <li class="checkAll"><label><input type="checkbox">全选</label></li> <li><label><input type="checkbox" name="veget" value="白菜"&g...
jquery取得多选checkbox选中的值
php菜鸟技术天地
05-15 4243
jquery取得多选checkbox选中的值  将所有选中的值保存到数组中 New Document function go() { var str=""; $("input[name='checkbox']:checkbox").each(function(){
jquery拿到多个 checkbox 选中的值 单个checkbox是否选中
test
03-05 1175
//获取多checkbox选中值 var id_array=new Array(); $('input[name="testName"]:checked').each(function(){ id_array.push($(this).val());//向数组中添加元素 }); var idstr=id_array.join(',');//将数组元素连接起来以构建一个字符...
jquery获取列表中选中元素的data-clipboard-text值
最新发布
05-29
你可以使用以下代码来获取选中元素的 `data-clipboard-text` 值： ```javascript var selectedData = []; $('ul li input[type="checkbox"]:checked').each(function() { selectedData.push($(this).closest('li').data('clipboard-text')); }); console.log(selectedData); ``` 解释一下这段代码： - `$('ul li input[type="checkbox"]:checked')` 选择了所有被选中的 checkbox 元素。 - `.each(function() { ... })` 遍历了所有被选中的 checkbox 元素。 - `$(this).closest('li').data('clipboard-text')` 获取了当前 checkbox 元素所在的 li 元素的 `data-clipboard-text` 值，并将其存入 `selectedData` 数组中。 - `console.log(selectedData)` 输出了所有选中元素的 `data-clipboard-text` 值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

皮皮冰要做大神

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值