实现网格的全选和取消

已于 2022-04-25 16:25:35 修改
阅读量50 收藏
点赞数
文章标签： html javascript
于 2022-04-25 16:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69180398/article/details/124408119
版权

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

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

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

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

    jcball.οnclick=function(){

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

        {

            jtbs[i].checked=this.checked;

        }

    }

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

    {

        jtbs[i].οnclick=function(){

            var flag=true;

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

            {

                if(!jtbs[i].checked)

                {

                    flag=false;

                    break

                }

            }

            jcball.checked=flag;

        }

    }

</script>

</body>

 

</html>

</body>

</html>

 

没有翅膀却想飞上天空892
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js：全选和反选
Jessicawh的博客
07-15 240
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: .
Android在recycleview中进行全选和取消全选
04-24
在实际应用中，我们经常需要实现全选和取消全选的功能，特别是在涉及到多选操作的场景，如文件管理、联系人选择等。本教程将详细讲解如何在RecyclerView中实现全选和取消全选，并获取已选择的数据。 首先，我们需要...
html全选和取消全选JS
weixin_34121304的博客
01-24 109
&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 204
效果展示： 代码展示： <!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 637
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
JavaScript第一篇之实现按钮全选、功能
10-21
在JavaScript编程中，实现按钮全选的功能是一种常见的需求，尤其在多选列表或者复选框组的场景下。本文将详细解析如何通过JavaScript实现这一功能。 首先，我们需要创建一个HTML文档，确保其编码为UTF-8，以避免...
GridView 单选和全选功能以及全选操作和取消全选
06-08
在Android开发中，GridView是一种常用的...以上就是关于GridView实现单选、多选以及全选和取消全选功能的详细说明，包括基本使用、事件处理、性能优化等方面。在实际开发中，可以根据项目需求进行适当的调整和定制。
全选反选取消删除，gridviewHelper
03-21
`GridViewHelper`通常是一个辅助类，用于帮助开发者更方便地处理GridView中的各种操作，如全选、反选、取消选择以及删除功能。这些功能在实际应用中非常实用，尤其是在需要用户进行多选操作的场合。 全选功能通常是...
C# grid checkbox 全选
04-10
在描述中提到的“C# grid checkbox 全选”是指在C#中使用数据网格（通常为DataGridView或DevExpress的GridView）控件时，实现表头复选框全选功能的技术。这个功能常见于数据管理界面，允许用户一键选择或取消选择...
实现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>
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
前端基础知识——table表格 （全选）（十一）
weixin_45496521的博客
06-15 216
【代码】前端基础知识——表格制作 （全选）（十一）
table 表格的全选和反选
wbj16116的博客
07-03 939
<table class="layui-table"> <thead> <tr> <th style="width: 15px;"><input name="user_ids" type="ch...
前端table表格的全选/反选/跨页勾选（封装）
最新发布
Fhm123456_的博客
12-29 601
前置条件1：table表格里面必须有一项是作为这一条数据的唯一值，比如：id，必须要有的！前置条件2：点击全选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道全选选哪些数据。前置条件3：点击反选按钮，需要调接口，让后端给你返全部需要勾选的数据：pathologyId，例如【1，2，3】这样我们才知道反选选哪些数据。先定义selectListIds ：【】,为了知道哪些数据是要选中的。前提：项目需要，想要一个可以全选，反选，跨页勾选的需求。
表单全选和取消全选效果（55）
weixin_45147894的博客
07-08 343
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
操作元素之表单全选取消全选案例
m0_72711350的博客
02-06 371
操作元素之表单全选取消全选案例
如何对三维模型进行反选透明处理？
知屋安砖
04-16 288
如何对三维模型进行反选透明处理？示例描述与操作指南示例效果展示实现步骤相关示例相关接口 示例描述与操作指南 将所选构件或构件组以外的其它全部构件透明化，若未选择构件直接点击运行，则默认选择一个管道构件。 使用接口getHighlightComponentsKey、transparentOtherComponentsByKey、clearHighlightList实现。 示例效果展示 实现步骤 使...
OA里用java实现全选和取消全选
04-28
在Java中实现全选和取消全选，可以通过以下步骤： 1. 定义全选和取消全选的按钮，并添加事件监听器。 ```java JButton selectAllBtn = new JButton("全选"); selectAllBtn.addActionListener(new ActionListener()...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值