表单的全选取消全选

<div class="wrap"><table border="1" cellspacing="0" cellpadding="0"><caption>恭喜发财</caption><thead><tr><th><input type="checkbox" id="j_cbAll" checked="checked"/></th><th>商品</th><th>价钱</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox"/></td><td>苹果</td><td>8000</td></tr><tr><td><input type="checkbox"/></td><td>华为</td><td>9000</td></tr><tr><td><input type="checkbox"/></td><td>小米</td><td>19999</td></tr><tr><td><input type="checkbox"/></td><td>小米+</td><td>20000</td></tr></tbody></table></div>
<style type="text/css">table{width: 200px;margin: 50px auto;text-align: center;border-collapse: collapse; /* border-collapse: collapse;  改变线性 */font-size: 14px;}thead tr{color: white;height: 30px;background-color: #63b5ef;}tbody tr{height: 30px;}tbody td{border-bottom: 1px solid #2177b5;font-size: 12px;color: #727679;}.bg{color: black;background-color: rgba(223, 189, 214,0.5);}table caption{font-weight: bold;font-size: 20px;}</style>
<script type="text/javascript">//获取相应的元素var j_cbAll = document.getElementById('j_cbAll');//获取thead中th的全选按钮var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //获取<tbody>中td的选择按钮//注册点击事件//全选与不全选的制作j_cbAll.onclick = function(){//console.log(this.checked);//测试复选框是否已经选中,true选中,false没选中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked; //让j_tbs中的按钮和j_cbAll的按钮属性相等}}//用j_cbAll的按钮去影响j_tbs中的按钮//设置一个变量来确定是否全部选中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].onclick = function(){var flag = true;//设置一个属性,用来控制按钮是否选中//每次点击后都要检查td中的按钮是否都被点中	for (var i = 0; i < j_tbs.length; i++) {if(!j_tbs[i].checked){// 前面添加 ! 是属于j_tbs中某个按钮没有被选中 flag = false;}}j_cbAll.checked = flag;}}</script>

实现效果:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248238.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HDU 4339 Query

算法: 比赛时没有想到好的算法&#xff0c;暴力是O&#xff08; Q * N &#xff09;肯定超时。 赛后&#xff0c;线段树&#xff0c;树状数组&#xff0c;HASH都能AC&#xff0c;想了下&#xff0c;的确用树状数组 时间复杂度就可以优化到O&#xff08;Q * lgN * lgN) 2000msAC…

201904快速阅读术

在看过了几本数之后&#xff0c;发现原来培养读书的习惯好像也不太难&#xff0c;“将读书融入生活&#xff0c;框定读书时间” 生活中&#xff0c;我确实也是这样执行了。利用每天上下班的时间听书&#xff0c;有些觉得可以读快的书籍用了1.5倍速度在听&#xff0c;难懂的部分…

最简方式 表格编辑 基于 el-table

共下面5点1.新增一个显示和隐藏的参数2.在显示那边新增一个input框&#xff0c;用v-model绑定数据&#xff0c;用v-if来显示和隐藏3.给之前的显示的span标签添加v-else 和上面形成if else4.编辑和保存按钮同理&#xff0c;然后编辑按钮触发的任务将所有输入打开。即seen置为tru…

Spring Boot 自动配置原理

自动配置原理配置文件到底能写什么&#xff1f;怎么写&#xff1f;自动配置原理&#xff1b; 参考&#xff1a;https://docs.spring.io/spring-boot/docs/1.5.9.RELEASE/reference/htmlsingle/#common-application-properties配置文件能配置的属性参照1、自动配置原理&#xff…

C#Socket编程详解(一)TCP与UDP简介

一、TCP与UDP&#xff08;转载&#xff09; 1、TCP 1.1 定义 TCP&#xff08;TransmissionControl Protocol&#xff09;传输控制协议。 是一种可靠的、面向连接的协议&#xff08;eg:打电话&#xff09;、传输效率低全双工通信&#xff08;发送缓存&接收缓存&#xff09;、…

动态创建表格数据

<input type"button" value"创建"><style>*{margin: 0;padding: 0;}table{width: 980px;margin: 50px auto;}table,th,tr,td{text-align: center;border: 1px solid #ccc;}</style><script>var heads [姓名, 年龄, 性别, 学号, 薪…

第四节:EF Core的并发处理

1.说明 和EF版本的并发处理方案一致&#xff0c;需要知道乐观并发和悲观并发的区别&#xff0c;EF Core只支持乐观并发&#xff1b;监控并发的两种方案&#xff1a;监测单个字段和监测整条数据&#xff0c;DataAnnotations 和 FluentApi的两种配置方式。 &#xff08;PS&#x…

JS中的prototype

JS中的phototype是JS中比较难理解的一个部分(转自出处&#xff1a;&#xff08;http://www.cnblogs.com/yjf512/&#xff09;) 本文基于下面几个知识点: 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是&#xff0c;现在有1个类A,我想要创建一个类B,…

微博发布案例

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <div class"box"><!-- 顶部搜索框 --><div class"inputBox"><textarea maxlength"200"></textarea></div&…

1.3 Go语言基础之数据类型

Go语言中有丰富的数据类型&#xff0c;除了基本的整型、浮点型、布尔型、字符串外&#xff0c;还有数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;等。Go 语言的基本类型和其他语言大同小异。 一、整型 1.1 基本类型 整型分为以下两个大类&#xff1a; 按…

【网络安全】关于ARP攻击的原理以及在Kali Linux环境下的实现

转自&#xff1a;https://www.cnblogs.com/rebrust/p/6096101.html 全文摘要 本文讲述内容分为两部分&#xff0c;前半部分讲述ARP协议及ARP攻击原理&#xff0c;后半部分讲述在Kali Linux环境下如何实现ARP攻击以及ARP欺骗&#xff0c;如果对于ARP攻击的背景和原理不感兴趣的话…

动态创建英雄图片

推荐在写动态生成标签数据的时候&#xff0c;提前写一遍htmlcss的结构&#xff0c;方便提供写照模板 <input type"button" value"按钮"><style type"text/css">* {margin: 0;padding: 0;list-style: none;}ul {width: 600px;margin…

第五节:EF Core中的三类事务(SaveChanges、DbContextTransaction、TransactionScope)

一. 说明 EF版本的事务介绍详见&#xff1a; 第七节: EF的三种事务的应用场景和各自注意的问题(SaveChanges、DBContextTransaction、TransactionScope)。 本节主要介绍EF Core下的三种事务的用法和各自的使用场景&#xff0c;其中SaveChanges和DBContextTransaction事务与EF版…

教你简单理解分布式与传统单体架构的区别

教你简单理解分布式与传统单体架构的区别 原文:教你简单理解分布式与传统单体架构的区别分布式是一种系统架构方式&#xff0c;而在分布式系统中一般基于中间件进行开发&#xff0c;消息中间件是分布式系统中比较核心的中间件之一。这三样东西随便拿出一个来都可能要说上半天&a…

js(Dom+Bom)第五天(1)

JavaScript BOM介绍 概念 BOM&#xff08;Browser Object Model&#xff09;即浏览器对象模型。 本质&#xff1a; 通过对象抽象浏览器中的一些功能 例如&#xff1a;&#xff08;刷新页面&#xff0c;alert,confirm,pormpt,跳转 ...&#xff09;BOM顶级对象 window对象是js中…

第六节:深究事务的相关性质、隔离级别及对应的问题、死锁相关

一. 相关概念 前面系列中的章节的&#xff1a; 第二十二节: 以SQLServer为例介绍数据库自有的锁机制(共享锁、更新锁、排它锁等&#xff09;和事务隔离级别 介绍了各种锁以及事务的隔离级别&#xff0c;是从数据库的角度进行介绍的&#xff0c;本章节是通过EF Core为载体&…

js(Dom+Bom)第五天(2)

webAPI 01-事件监听 为什么要学事件监听 之前给元素注册事件的时候,同一个事件会被覆盖掉事件监听的本质 通过另外一种方式给元素注册事件, 同时可以解决同一个事件不会被覆盖掉.知识点-通过 on 方式给元素注册事件 之前注册事件的方式:事件源.onclick function() {}on是一种…

UIAutomator简介

简介 Android 4.3发布的时候包含了一种新的测试工具–uiautomator&#xff0c;uiautomator是用来做UI测试的。也就是普通的手工测试&#xff0c;点击每个控件元素 看看输出的结果是否符合预期。比如 登陆界面 分别输入正确和错误的用户名密码然后点击登陆按钮看看是否能否登陆以…

从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级

标题&#xff1a;从零开始实现ASP.NET Core MVC的插件式开发(五) - 使用AssemblyLoadContext实现插件的升级和删除 作者&#xff1a;Lamond Lu 地址&#xff1a;https://www.cnblogs.com/lwqlun/p/11395828.html 源代码&#xff1a;https://github.com/lamondlu/Mystique 前景回…

【JavaWeb】石家庄地铁搭乘系统——第一版(功能尚未完善)

小组成员&#xff1a;高达&#xff0c;程超然 项目目的&#xff1a;能算出地铁搭乘的最优路线并显示在地图上 个人任务&#xff1a;调用队友写好的java代码&#xff0c;将结果显示在网页上 新的知识&#xff1a;百度地图API&#xff0c;使用JQuery的AJAX异步提交 进度&#xff…