CheckBox在表格中全选、部分选和反选

最新推荐文章于 2021-11-03 10:32:00 发布
VIP文章 最新推荐文章于 2021-11-03 10:32:00 发布
阅读量6.3k 收藏 6
点赞数 1
分类专栏： HTML JQuery JavaScript CSS 文章标签： CheckBox table中checkbox全选和反选 checkbox部分选
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/you23hai45/article/details/9229589
版权

1、源码如下，TableCheckBox.html

TableCheckBox.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table中的CheckBox</title>
<script type="text/javascript" src="script/jquery-1.10.1.js"></script>
<style type="text/css">
   body
   {
     width:100%;
     height:100%;
     font-size:12px;
   }
   table
   {
     width:80%;
     height:100%;
   }
   .tr_odd
   {
     background: #EBF2FE;
   }
   .tr_even
   {
     background: #B4CDE6;
   }
   .tab_body
   {
     text-align: center;
   }
</style>
<script type="text/javascript">
   $(function(){
	   $("tr:odd").addClass("tr_odd");//奇数行背景色
	   $("tr:even").addClass("tr_even");//偶数行背景色
	   
	   $("#ckb_head").click(function(){
		   if($(this).prop("checked")){//全选
			   $("input[name='ckb']").attr("checked","true");
最低0.47元/天 解锁文章
翱翔天地
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生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]
实现table表格checkbox复选框的全选 反选
11-11
实现table表格checkbox复选框的全选 反选.
vue+vant-UI框架实现购物车的复选框全选和反选功能
12-30
购物车页面的设计图 商品的列表 代码： <ul v-if=shoppingListData.rows.length> <li nv-for=(item,index) shoppingListData.rows :key=index > <van checkbox :value=item.goods_id v-model item.isChecked checked-color=#07c160 @click></van> <div class=list_details> <div
checkbox表格全选
CherishL_的专栏
04-14 878
function checkAll(obj){ if(obj.checked){ $("table input[type=checkbox]").prop("checked",true); }else{ $("table input[type=checkbox]").removeAttr("checked");
element-ui ,table表格的反选
V8min的博客
11-03 602
反选就是顾客选择的数据在顾客编辑查看的时候要是已选择的状态，让顾客知道那些是已经选择了的。 重点： 我们的思想是把我们已经选择的数据和表格的数据做判断，因为我们选择的数据是从表格里面选择的，所以他们一定会有相同的数据，我们就让他们相同的数据显示被选中的状态就可以了。 watch: { tableData: { immediate: true, deep: true, handler(list) { if (list.length) {
checkbox的三种状态——全选、部分选择、全不选
liusixsixsix的博客
10-16 2128
<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox> checkbox有三种状态全选(显示的’√’), 选中部分(显示的’-’), 全不选(啥都没显示) 对于indeterminate和v-model绑定的a和b的值 如果true true 或者 true false样式为- 如果false true样式为√ 如果false false样式为不勾 <template> <div class
table 表格的全选和反选
wbj16116的博客
07-03 927
<table class="layui-table"> <thead> <tr> <th style="width: 15px;"><input name="user_ids" type="ch...
JavaScript CheckBox实现全选和部分选择
weixin_34292287的博客
01-31 166
1 <html> 2 <head> 3 <script> 4 function BatchAddToBasket() { 5 var questionNums = ''; 6 var checkboxs = document.getElementsByName('q...
table表格中如何全选---以及复选框实现反选
qq_34802511的博客
09-23 6582
table表格中如何全选，代码如下： &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;met
小成本实现部分选中的复选框
ywb201314的专栏
12-06 510
大家都知道，HTML 里复选框（checkbox）表示选中状态的 checked 属性，只有选中和没被选中两种情况。但有时候，我们还要表示「部分选中」状态：如实现树或表格勾选时，当用户选择一部分子记录，父记录的状态就应该是部分选择。 通常的做法 有很多方案可以实现这个需求，这里列举两个有代表性的简单介绍下： 1）利用 checkbox 自身其他属性来模拟。如下图，用 disabl
jQuery实现table表格checkbox全选的方法分析
10-18
主要介绍了jQuery实现table表格checkbox全选的方法,结合实例形式分析了jQuery事件响应与元素遍历实现table表格checkbox元素状态动态修改相关操作技巧,需要的朋友可以参考下
Checkbox全选问题
12-27
HtML javascritp checkbox 全选HtML javascritp checkbox 全选
table全选反选
03-23
jQuery表格行全选反选插件
elementUI多选框反选的实现代码
10-17
主要介绍了elementUI多选框反选的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
js checkbox全选 反选 取消全部设置表单html复选框勾选
11-24
js checkbox全选 反选 取消全部设置表单html复选框勾选
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
基于 Spring Cloud 组件构建的分布式服务架构
04-25
Java SSM项目是一种使用Java语言和SSM框架（Spring + Spring MVC + MyBatis）开发的Web应用程序。SSM是一种常用的Java开发框架组合，它结合了Spring框架、Spring MVC框架和MyBatis框架的优点，能够快速构建可靠、高效的企业级应用。 1. Spring框架：Spring是一个轻量级的Java开发框架，提供了丰富的功能和模块，用于开发企业级应用。它包括IoC（Inverse of Control，控制反转）容器、AOP（Aspect-Oriented Programming，面向切面编程）等特性，可以简化开发过程、提高代码的可维护性和可测试性。 2. Spring MVC框架：Spring MVC是基于Spring框架的Web框架，用于开发Web应用程序。它采用MVC（Model-View-Controller，模型-视图-控制器）的架构模式，将应用程序分为模型层、视图层和控制器层，提供了处理请求、渲染视图和管理流程的功能。 3. MyBatis框架：MyBatis是一个持久层框架，用于与数据库进行交互。它提供了一种将数据库操作与Java对象映射起来的方式，避免了手动编写繁琐的SQL语句，并提供了事务管理和缓存等功能，简化了数据库访问的过程
表格全选 全不选 反选怎么做
05-09
在 HTML 中，可以使用 `<table>` 标签来创建表格。要实现表格的全选、全不选和反选功能，需要使用 JavaScript，并在 HTML 中添加相应的事件处理函数。 以下是一个示例代码，实现了表格的全选、全不选和反选功能： ```html <!DOCTYPE html> <html> <head> <title>Table Selection</title> <script> function selectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = true; } } } function unselectAll() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = false; } } } function invertSelection() { var checkboxes = document.getElementsByTagName('input'); for (var i = 0; i < checkboxes.length; i++) { if (checkboxes[i].type == 'checkbox') { checkboxes[i].checked = !checkboxes[i].checked; } } } </script> </head> <body> <table> <thead> <tr> <th><input type="checkbox" onclick="selectAll()">全选</th> <th><input type="checkbox" onclick="unselectAll()">全不选</th> <th><input type="checkbox" onclick="invertSelection()">反选</th> <th>名称</th> <th>价格</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品1</td> <td>100</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品2</td> <td>200</td> </tr> <tr> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td><input type="checkbox"></td> <td>商品3</td> <td>300</td> </tr> </tbody> </table> </body> </html> ``` 在上述代码中，使用了三个 JavaScript 函数分别实现了全选、全不选和反选功能。这三个函数分别被绑定到了表格头部的三个复选框的 onclick 事件上。 其中，selectAll() 函数将所有复选框的 checked 属性设置为 true，unselectAll() 函数将所有复选框的 checked 属性设置为 false，invertSelection() 函数将所有复选框的 checked 属性取反。 在 HTML 中，使用了一个表格，其中表头的前三列分别是“全选”、“全不选”和“反选”三个复选框。在表格的 tbody 中，每一行都包含一个复选框，用来选择该行对应的商品。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值