【无标题】实现表格全选和取消全选功能

最新推荐文章于 2023-12-29 12:09:13 发布
最新推荐文章于 2023-12-29 12:09:13 发布
阅读量84 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69108530/article/details/124027515
版权

<!DOCTYPE html>

<html>

 

<head lang="en">

    <meta charset="UTF-8">

    <title>表格全选/取消全选</title>

    <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>

        // 1. 实现全选和取消全选功能

        // 将下面所有复选框的 checked 属性(选中状态)依附上面全选复选框即可

        // 1.1 获取获取上面复选框元素对象

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

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

        // 1.2 获取下面所有复选框元素对象

        // 核心功能:

        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++){

        // j_tbs[i].checked=ture;

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

            }

        }

         }

        // 难点2. 下面复选框需要全部选中，上面复选框才能被选中

        // 2.1 给下面所有复选框 都要 绑定点击事件

    </script>

</body>

 

</html>

qq_69108530
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js：全选和反选
Jessicawh的博客
07-15 256
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: .
jquery一句话全选/取消全选
10-28
在网页开发中，全选和取消全选的功能是非常常见的需求，尤其在表格或者多选项列表中。jQuery 提供了一种简单高效的方式来实现这一功能。在本文中，我们将深入探讨如何使用 jQuery 实现“一句话全选/取消全选”。 ...
html全选和取消全选JS
weixin_34121304的博客
01-24 115
&lt;html&gt; &lt;body&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;&lt;input type="checkbox" onclick="swapCheck()" /&gt;&lt;/th&g
表单全选取消
qq_45308912的博客
11-15 214
效果展示： 代码展示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { /* background-color: red; */ width: 250px; margin: 0px auto; } table { width: 100%; .
HTML、CSS、Jquery综合练习之全选、全不选与反选
weixin_61399134的博客
05-17 692
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
JQ 全选和反选和取消
05-01
标题“JQ全选和反选和取消”涉及的是jQuery中处理多选元素，如复选框或表格行的选择状态。在这个主题下，我们将深入探讨如何实现全选、反选以及取消选择的功能，并结合给出的`demo.html`文件进行实例分析。 1. **...
jquery实现全选和全不选功能效果的实现代码【推荐】
10-22
为了实现全选和全不选的功能，文章首先定义了一个复选框，这个复选框是全选/取消全选的控制按钮，并给它一个id为“checkedAll”。随后，通过jQuery绑定了点击事件到这个按钮上。当用户点击这个按钮时，将会触发一个...
解决ext下拉列表全选和去全选功能
03-30
标题提到的“解决EXT下拉列表全选和去全选功能”是一个常见的需求，特别是在数据表格或下拉列表中进行批量操作时。下面我们将深入探讨EXTJS中实现这一功能的方法。 EXTJS的下拉列表通常由`Ext.form.field.ComboBox`...
iOS中tableview实现编辑、全选及删除等功能的方法示例
08-30
4. 取消全选的实现，反向操作上述过程，取消所有单元格的选择，并恢复全选按钮的标题。 ```swift - (void)deselectAllItems { for (int i = 0; i ; i++) { NSIndexPath *indexPath = [NSIndexPath ...
实现table表格checkbox复选框的全选 反选
11-11
实现table表格checkbox复选框的全选 反选.
jQuery实现table表格checkbox全选的方法分析
12-04
本文实例讲述了jQuery实现table表格checkbox全选的方法。分享给大家供大家参考，具体如下： 今天在页面中使用jQuery实现了全选框操作，如图： 具体的实现过程很简单： 第一步 设计一个简单的表格： 设置表格列标题，在列标题中的单选框为全选框； 设置表格题，表格题的单选框就是普通的单选框啦： <table> <thead> <tr> <td> <input type="checkbox" onclick="selectAll(this.checked)" /> </td> </tr>
前端基础知识——table表格 （全选）（十一）
weixin_45496521的博客
06-15 240
【代码】前端基础知识——表格制作 （全选）（十一）
table 表格的全选和反选
wbj16116的博客
07-03 945
<table class="layui-table"> <thead> <tr> <th style="width: 15px;"><input name="user_ids" type="ch...
前端table表格的全选/反选/跨页勾选（封装）
最新发布
Fhm123456_的博客
12-29 675
前置条件1：table表格里面必须有一项是作为这一条数据的唯一值，比如：id，必须要有的！前置条件2：点击全选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道全选选哪些数据。前置条件3：点击反选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道反选选哪些数据。先定义selectListIds ：【】,为了知道哪些数据是要选中的。前提：项目需要，想要一个可以全选，反选，跨页勾选的需求。
表单全选和取消全选效果（55）
weixin_45147894的博客
07-08 356
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
操作元素之表单全选取消全选案例
m0_72711350的博客
02-06 381
操作元素之表单全选取消全选案例
如何对三维模型进行反选透明处理？
知屋安砖
04-16 298
如何对三维模型进行反选透明处理？示例描述与操作指南示例效果展示实现步骤相关示例相关接口 示例描述与操作指南 将所选构件或构件组以外的其它全部构件透明化，若未选择构件直接点击运行，则默认选择一个管道构件。 使用接口getHighlightComponentsKey、transparentOtherComponentsByKey、clearHighlightList实现。 示例效果展示 实现步骤 使...
vueH5级联组件，实现全选，非全选
manda Liu的博客
03-01 478
vueH5级联组件，实现全选，非全选。
JavaScript实现复选框全选功能代码示例
该资源是一个关于使用JavaScript实现复选框全选功能的示例代码，主要涉及网页交互和文件管理的场景。 在网页交互中，复选框全选功能是常见的用户界面操作，允许用户一键选择所有列出的选项。这个功能在文件管理、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值