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 ...
随机推荐
- C#3.0新增功能10 表达式树 06 生成表达式
连载目录 [已更新最新开发文章,点击查看详细] 到目前为止,你所看到的所有表达式树都是由 C# 编译器创建的. 你所要做的是创建一个 lambda 表达式,将其分配给一个类型为 Expressi ...
- RabbitMQ延迟消息的延迟极限是多少？
之前在写Spring Cloud Stream专题内容的时候,特地介绍了一下如何使用RabbitMQ的延迟消息来实现定时任务.最近正好因为开发碰到了使用过程中发现,延迟消息没有效果,消息直接就被消费了 ...
- [剑指offer] 6. 旋转数组的最小数字
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- 多个module实体类集合打一个jar包并上传至远程库
本章内容主要分享多个module中的实体类集合生成到一个jar包中,并且发布到远程库:这里采用maven-assembly-plugin插件的功能来操作打包,内容不长却贴近实战切值得拥有,主要节点内容 ...
- 使用c++开发跨平台的程序
使用c++开发跨平台的程序 背景 在开发过程中,使用c++作为开发语言,通常被认为是痛苦的,啰嗦的,超长开发时间的.最近几年有各种各样的语言被广泛使用,相对比来说c++不是那么出彩.c++虽然年龄大, ...
- DAX 第六篇：统计函数
统计函数用于创建聚合,对数据进行统计分析.在使用统计函数时,必须考虑到数据模型,表之间关系,数据重复等因素,一般都会搭配过滤函数实现数据的提取和分析. 统计量一般是:均值.求和.计数.最大值.最小值. ...
- <<Modern CMake>> 翻译 2. CMake 基础
<<Modern CMake>> 翻译 2. CMake 基础 最低版本 这是每个 CMakeLists.txt 文件的第一行.CMakeLists.txt 是 CMake 所 ...
- opencv编译
1. clone源码 https://github.com/opencv/opencv 2. 安装cmake 3. cmake配置的时候,输出目录需要另外设置一个目录,不可以放到源码目录 4. 用cm ...
- Java初中级程序员面试题宝典
Java基础部分 &与&&区别? &和&&都是逻辑运算符,都是判断两边同时真则为真,否则为假:但是&&当第一个条件不成之后,后面的条件都 ...
- Codeforces Round #192 (Div. 2) (330A) A. Cakeminator
题意: 如果某一行没有草莓,就可以吃掉这一行,某一列没有也可以吃点这一列,求最多会被吃掉多少块蛋糕. //cf 192 div2 #include <stdio.h> #include & ...