关于js表格全选，与反选代码

最新推荐文章于 2024-08-04 20:38:28 发布
最新推荐文章于 2024-08-04 20:38:28 发布
阅读量117 收藏
点赞数
文章标签： css html5 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xue_tingting/article/details/120603891
版权

    <style>

        table{

            width: 200px;

            text-align: center;

            margin: 100px auto;

            border-collapse:collapse; 

        }

        thead{

            border:1px solid rgb(22, 3, 3);

            background-color: cornflowerblue;

        }

        thead th{

            border: 1px solid black;

        }

        tbody{

            background-color: rgb(76, 168, 211);

        }

        

        tbody td{

            border: 1px solid black;

        }

        

    </style>

</head>

<body>

    <table>

        <thead>

        <tr>

            <th>

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

            </th>

            <th>商品</th>

            <th>价钱</th>

        </tr>

    </thead>

    <tbody id="j_tb">

        <tr>

            <td>

                <input type="checkbox"  >

            </td>

            <td>iphone</td>

            <td>80000</td>

        </tr>

        <tr>

            <td><input type="checkbox" ></td>

            <td>iphone</td>

            <td>80000</td>

        </tr>

        <tr>

            <td><input type="checkbox"  ></td>

            <td>iphone</td>

            <td>80000</td>

        </tr>

        <tr>

            <td><input type="checkbox" ></td>

            <td>iphone</td>

            <td>80000</td>

        </tr>

        <tr>

            <td><input type="checkbox" ></td>

            <td>iphone</td>

            <td>80000</td>

        </tr>

    </tbody>

    </table>

    <script>

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

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

         j_cbAll.οnclick=function(){

          console.log( this.checked);

         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].οnclick=function(){

                 var flag=true;//设置一个变量，如果全选中了才让j-cbAll触发，现在是真，遍历循环

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

                 if(!j_tbs[i].checked){

                    flag=false;

                    break;

                    //只要有一个没有选择就退出

                 }

                }

                j_cbAll.checked=flag;

            }

        }

    </script>

</body>

</html>

头秃女孩子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS简单表格列表全选反选代码.zip
07-05
JS简单表格列表全选反选代码，原生JS，点击表头按钮，实现全选、反选操作，实用的网页代码。
利用JS来实现表格的全选、全不选、反选以及删除的功能
StruggleBamboo的博客
12-02 2355
利用JS来进行表格的选择删除等功能二、代码1.表格的制作以及事件的绑定2.全选按钮的功能实现3.全不选按钮的功能实现4.反选按钮的功能实现5.删除按钮的功能实现6.鼠标悬停时颜色的变化7.运行结果图总结 二、代码 1.表格的制作以及事件的绑定 代码如下（示例）： <body> <table> <caption>学生信息表</caption> <tr> <th><input type="checkbo
js实现案例全选全不选(超详细)
qq_45378970的博客
09-29 1032
完整代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0;
【javascript】如何在表格中进行全选、反选操作.
如切如磋，如琢如磨，臻于至善。
03-27 3027
其中需要注意的是。用CSS3的奇偶选择器 nth-child(odd)  下面是JS代码： $(function(){ $("#selectAll").bind("click",function(){ if($(this).prop("checked")){ $("input[type='checkbox']").not(this).prop("checked",true);
js表格全选反选
b286588411的博客
04-19 633
1 <!--(c) Copyright 2018 Web牧马人. All Rights Reserved. 2 2018-04-19--> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset="utf-8" /> ...
用js创建表格及全选反选
Azhongpu的博客
12-26 403
用js创建表格及全选反选 用js代码来实现创建表格，及全选反选，代码效果图如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &l
vue2.0在table中实现全选和反选的示例代码
08-28
Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...
JS简单表格列表全选反选特效代码
03-20
这个“JS简单表格列表全选反选特效代码”示例提供了一个简洁的方法来处理这种交互功能。下面我们将深入探讨相关的知识点。 首先，我们需要了解HTML中的`<table>`元素，这是构建表格的基础。一个表格通常由`<table>`...
原生JS表格列表全选反选代码.zip
07-05
这个"原生JS表格列表全选反选代码"就是一个解决此类问题的示例。下面将详细介绍这个示例中涉及的关键知识点。 1. **HTML表格（`<table>`）**： HTML表格是网页中用于组织数据的基本元素，由`<table>`、`<tr>`（行...
原生JS表格列表全选反选单选多选代码.zip
07-11
这是一款原生JS实现的，点击表格列表选中，可以单选、多选、全选和反选的表格列表选择代码。 js代码 [removed]  var all = document.getElementById("j_cbAll");  var tbody = document.getElementById("j_tb");  var checkboxs = tbody.getElementsByTagName("input");  all.onclick = function() {      for (var i = 0; i < checkboxs.length; i ) {          var checkbox = checkboxs[i];          checkbox.checked = this.checked;      }  };  for (var i = 0; i < checkboxs.length; i ) {      checkboxs[i]. {          var isCheckedAll = true;          for (var i = 0; i < checkboxs.length; i ) {              if (!checkboxs[i].checked) {                  isCheckedAll = false;                  break;              }          }          all.checked = isCheckedAll;      };  }  [removed]
JavaScript的表格全选以及反选删除的实现和应用
weixin_49640815的博客
12-13 175
body部分 css部分 js部分
jQuery中表格全选反选demo
安静的对折的专栏
01-04 2754
使用jQuery实现一个简单的表格全选与反选的案例 * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; }
js 表格的增删操作，全选，反选，全不选操作
Vue1024的博客
01-07 748
js 表格的增删操作，全选，反选，全不选操作
【js DOM 表单与节点操作】
crush_oo的博客
05-21 124
dom节点操作
利用js实现动态表格搭建及全选反选的功能
Eric_freestyle的博客
10-27 290
利用js实现动态表格搭建及全选反选的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt
JavaScript-表单全选/反选效果（JS详解）
廖若星辰-LTY
05-30 785
表单中常常会用到checkbox复选框，通过复选框做出的列表全选或全不选的效果也是很常见的，比如购物车的商品列表，那么这样的选择效果及其底层的实现思路及代码
DOM（二）
zhr_beyond的博客
03-05 581
DOM（二） 1.排他思想 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale=1.0, minimum
原神自定义倒计时
最新发布
lulei5153的博客
08-04 443
【代码】原神自定义倒计时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值