实现表格全选和取消全选功能

已于 2022-04-10 17:01:58 修改
阅读量253 收藏
点赞数
文章标签： javascript
于 2022-04-10 15:28:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69000137/article/details/124079152
版权

<!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.0">

    <title>Document</title>

    <head lang="en">

       

       

        <style>

            * {

                padding: 0;

                margin: 0;

            }

           

            .wrap {

                width: 300px;

                margin: 100px auto 0;

            }

           

            table {

                border-collapse: collapse;

                border-spacing: 0;

                border: 1px solid #c0c0c0;

                width: 300px;

            }

           

            th,

            td {

                border: 1px solid #d0d0d0;

                color: #404060;

                padding: 10px;

            }

           

            th {

                background-color: #09c;

                font: bold 16px "微软雅黑";

                color: #fff;

            }

           

            td {

                font: 14px "微软雅黑";

            }

           

            tbody tr {

                background-color: #f0f0f0;

            }

           

            tbody tr:hover {

                cursor: pointer;

                background-color: #fafafa;

            }

        </style>

   

   

   

</head>

<body>

    <div class="wrap">

        <table>

            <thead>

                <tr>

                    <th>

                        <!-- 开始默认补选中 checked="checked" -->

                        <input type="checkbox" id="j_cbAll" />

                    </th>

                    <th>商品</th>

                    <th>价钱</th>

                </tr>

            </thead>

            <tbody id="j_tb">

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>iPhone8</td>

                    <td>8000</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>iPad Pro</td>

                    <td>5000</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>iPad Air</td>

                    <td>2000</td>

                </tr>

                <tr>

                    <td>

                        <input type="checkbox" />

                    </td>

                    <td>Apple Watch</td>

                    <td>2000</td>

                </tr>

            </tbody>

        </table>

    </div>

    <script>

        var j_cbAll=document.getElementById('j_cbAll');

               var j_tbs=document.getElementById('j_tb').getElementsByTagName('input');

                   j_cbAll.οnclick=function(){

                   for ( var i=0;i<j_tbs.length;i++){

                       j_tbs[i].checked=this.checked;

                   }

               }

                 for(var i=0;i<j_tbs.length;i++){

                  for(var i=0;i<j_tbs.length;i++){

                   if(!j_tbs[i].checked){

                       j_tbs[i].checked=false;

                       console.log(j_tbs[i].checked);

                   }

               }

               j_cbAll.checked=false;

                }

          </script>

       

</body>

</html>

长禾724
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现表格全选和取消全选
qq_41619968的博客
04-10 211
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl.
表格取消全选_先按住Ctrl键不放，再用鼠标操作表格，效率瞬间提升
weixin_42489088的博客
01-13 1435
在我们日常的Excel操作中，经常利用快捷键来提高工作效率，今天小编分享几个Ctrl键和鼠标组合的几个技巧，一起来看看吧！一、复制、粘贴在表格中复制、粘贴，你是利用功能按钮？还是快捷键？选中需要复制的内容，先按下Ctrl键不放，再用鼠标左键拖动选中区域，想复制到哪儿就拖到哪儿，演示如下图：二、填充序列在填充序列时，先输入1，然后再选中单元格，按下Ctrl键不放，鼠标移动到单元格右下角填充柄处，再按...
Layer表格勾选、翻页(分页)勾选、全选、取消全选的支持（附全代码，文尾可下载完整代码）
赏樱看雪撸代码
10-11 1719
Layer表格勾选、layer表格翻页(分页)勾选、全选、取消全选的支持（全代码）
全选与取消全选--图解（附加分页查询翻页组件）
qq_30347133的博客
01-12 523
这个用标签选择器
element-UI 表格列表的单选及全选，及分页跨页多选
couch potato的博客
10-28 4372
分页表格数据选择，跨页多选
Element UI 多选表格【翻页多选】全能版（含翻页多选数据反显、toggleRowSelection失效的原因解析和解决方案）
朝阳39的博客
07-26 5344
selection-change 的参数为当前页选中的所有行，在每次重新获取数据渲染表格时（如翻页时），参数为一个空数组，会导致历史选中的数据被清空！即便使用 来保留历史选中记录也无法达到预期效果。toggleRowSelection失效通常为以下两种情况：（1）表格数据发生变化，表格还没渲染完便执行了toggleRowSelection解决方案 ： 在 $nextTick 中执行 toggleRowSelection （2）toggleRowSelection的第一个参数不是表格源数据即便数据的值完全一
layui复选框的全选与取消实现方法
12-29
废话不多说啦，直接贴上代码吧！    *权限表        
微信小程序实现多选框全选与取消全选功能示例
10-17
总的来说，微信小程序实现多选框全选与取消全选功能涉及到了JS数据绑定、事件处理、WXML结构和WXSS样式。通过理解这些基本概念和技巧，开发者能够构建出更加复杂的交互功能，提升用户体验。在实际开发过程中，还需要...
vue3+element-plus 表格全选和跨页勾选，以及全选全部功能
最新发布
鹤渺的星球
10-30 1万+
这个功能，需要考虑很多交互的逻辑，因为我写的是【全选全部】是一个checkbox的勾选框，所以要考虑取消勾选的功能，自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的，点击按钮就代表全选所有操作，那么自然不用考虑取消勾选和禁用的逻辑，因为全选所有时，就已经走完批量全选的流程了。两种实现方式根据业务具体的调整，这次也是为了记录实现这个功能时遇到的问题和思考。
操作元素之表单全选取消全选案例
m0_72711350的博客
02-06 381
操作元素之表单全选取消全选案例
elementui表格复选框勾选数据，分页、全选/取消全选不影响数据回显
budai_bb的博客
04-07 1225
elementui表格复选框勾选数据，分页、全选/取消全选不影响数据回显 1、父组件引入 2、子组件，创建一个名为selectUsers的组件进行代码编写
element表格跨页全选实现
前端小攻城狮的博客
10-16 7103
先声明一下，我的这个跨页全选是根据前端静态分页实现的思路:添加一个全选按钮，全选后，选中所有数据。这里要实现两个操作，一个是element显示选中所有的项（包括分页的），二是将选中的项存储起来，方便发送数据到后端，再次全选后，取消所有选中。然后是实现，点击单条数据，选中状态需要切换。
实现表格全选和取消
weixin_53758688的博客
04-09 80
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表格全选/取消全选</title> <style> * { padding: 0; margin: 0; } .wrap { ...
element table 多选与分页回显功能
xuelong的博客
09-07 3896
vue项目使用elementUI的el-table多选分页回显功能，需要给导入后的员工批量选择添加部门，使用表格分页展示，并且选中的数据要求回显。
表格取消全选_Excel教程：你的表格你作主
weixin_28947253的博客
01-15 3452
国庆惊喜大促狂欢大放价23门原创教程，原价168，限时87元！！国庆狂欢，优惠不等人，早买早便宜点击了解支持微信公众号+小程序+APP+PC网站多平台学习1你有没有过这样的经历：在使用Excel时，希望把表格发到别人手中时看不到你表格中所设置的公式或者希望对方只能编辑你所指定的单元格区域？今天小编就以2016为例给大家分享如何隐藏表格中的公式以及保护工作表中的部分单元格区域，让你的表格...
表格的取消和全选功能
m0_69190401的博客
04-10 113
表格取消和全选功能 <script> var j_cbAll=document.getElementById('j_cbAll'); var j_tbs=document.getElementById('j_tb').getElementsByTagName('input'); j_cbAll.onclick=function(){ for ( var i=0;i<j_tbs.length;i++){ .
表格取消全选_Excel技巧 4种跨表格核对数据差异的详细方法
weixin_31554959的博客
01-14 1211
喜欢就关注我们吧出行佩戴口罩，少去公众场所，测体温后上岗，减少集中开会。一、相同格式的表格核对数据差异1.新建规则核对数据选择sheet11的表格区域后，【条件格式】—【新建规则】—【使用公式确定要设置格式的单元格】—输入: 【=A1=sheet10!A1】—【格式】—【填充】选择一个颜色就行注：输入公式会出现绝对引用符号，按三次F4键取消绝对引用就行2.选择性粘贴核对数据差异选择she...
Checkbox全选反选
weixin_43332393的博客
09-27 1144
</tbody> </table> </div> <script> // 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 // 获取元素 var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮 var j_tbs = documen...
Vue实现搜索结果页全选/取消全选功能详解及代码示例
通过以上步骤，你可以在Vue项目中轻松实现搜索结果页面的全选与取消全选功能，提升用户体验，特别是在筛选和管理数据时。这不仅适用于列表展示，也适用于其他类似场景，如表格、多选列表等。记住，实际开发中可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值