js全选与取消全选
布局部分：
<body>
<div class="con">
<table>
<thead>
<tr>
<th><input type="checkbox" id="j_cball"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody>
<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>
样式部分
<style>
.con {
width: 500px;
margin: 100px auto
} table {
/*每列首行的单元格大小决定该列单元格的宽度，保证表格不会变形但是文字多了会溢出 */
table-layout: fixed;
border: 1px solid #333;
width: 100%;
border-collapse: collapse;
} thead {
background-color: aqua;
color: white;
} thead th:nth-child(1) {
width: 25%;
} thead th:nth-child(2) {
width: 50%;
} thead th:nth-child(3) {
width: 25%;
} th,
td {
text-align: center;
border: 1px solid #333;
}
</style>
js部分
<script>
//获取所有的复选框
var cball = document.getElementById("j_cball");
var checkboxes = document.querySelector("tbody").querySelectorAll("input");
//console.log(checkboxes); cball.onclick = function() {
//默认是没有被选中的
//console.log(this.checked);
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = this.checked; //这里的this指的是被点击的全选按钮
}
} for (var i = 0; i < checkboxes.length; i++) {
//循环绑定事件
checkboxes[i].onclick = function() {
//每次点击下面的复选框，看看其他所有的按钮有没有被选中
var flag = true; for (var i = 0; i < checkboxes.length; i++) {
if (!checkboxes[i].checked) {
flag = false;
}
}
cball.checked = flag;
}
}
</script>
js全选与取消全选的更多相关文章
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- bootstrap实现checkbox全选、取消全选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
- DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行
.net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下: 代码如下,有注解,相信大家都看得明白: ...
- datagridview里面的checkbox全选和取消全选
全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...
随机推荐
- MediatR-进程内的消息通信框架
MediatR是一款进程内的消息订阅.发布框架,提供了Send方法用于发布到单个处理程序.Publish方法发布到多个处理程序,使用起来非常方便.目前支持 .NET Framework4.5..NET ...
- 个人永久性免费-Excel催化剂功能第72波-序列规则下的数据验证有效性好帮手：快速录入窗体辅助录入
Excel作为最好用的数据录入工具,没有之一,如果能够充分利用好Excel的灵活性和规范性,将带来极大的生产力提升,前面的几波功能也有做了几大数据录入的辅助功能,今天再次给大家带来一个特定的使用场景, ...
- 踩坑 Spring Cloud Hystrix 线程池队列配置
背景: 有一次在生产环境,突然出现了很多笔还款单被挂起,后来排查原因,发现是内部系统调用时出现了Hystrix调用异常.在开发过程中,因为核心线程数设置的比较大,没有出现这种异常.放到了测试环境,偶尔 ...
- 记一次愚蠢的经历--String不可变性
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 记录一次在写代码时愚蠢的操作,本文涉及到的知识点:S ...
- [leetcode] 309. Best Time to Buy and Sell Stock with Cooldown(medium)
原题 思路: 状态转移 出售股票的状态,最大利润有两种可能. 一,和昨天一样不动:二,昨天持有的股票今天卖掉. sell[i] = max(sell[i-1],buy[i-1] + prices[i] ...
- Centos7安装mysql8教程
网上的教程很多,我也参考了很多,以下是我实践的步骤,真实有效. 1．配置Mysql 8.0安装源: sudo rpm -Uvh https://dev.mysql.com/get/mysql80-co ...
- Java IO 为什么我们需要缓冲区
在执行IO操作我们通常会设置一个字节数组作为缓冲区用来写/读数据,一般情况下一个合理大小的缓冲区是有利于提升性能的,但是有一个问题一直困扰着我,为什么缓冲区可以提升IO操作的性能? 经查阅资料之后,总 ...
- 后端开发实践系列之二——领域驱动设计(DDD)编码实践
Martin Fowler在<企业应用架构模式>一书中写道: I found this(business logic) a curious term because there are f ...
- JAVA基础知识（五）数据类型转换
当使用 +.-.*./.%.运算操作时,遵循如下规则: 1.只要两个操作数中有一个是double类型的,另一个将会被转换成double类型,并且结果也是double类型: 2.如果两个操作数中有一个 ...
- Go标准库--net/http学习
Go中对网络的支持提供了标准库,net包提供了可移植的网络I/O接口,包括TCP/IP.UDP.域名解析和Unix域socket. http包提供了HTTP客户端和服务端的实现. 一般我们用http肯 ...