js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能,
主要是逻辑上的坑,理清后大概是:
1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消
2.只要有一个小弟取消时,全选要取消
3.当小弟都选上时,全选要选上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选和取消全选</title>
</head>
<body>
<h2>管理员列表</h2>
<table border="1px" width="500px">
<thead>
<tr>
<th><input type="checkbox"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>小弟1</td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/>小弟2</td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/>小弟3</td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/>小弟4</td>
<td>4</td>
<td>Admin</td>
<td>修改 删除</td>
</tr>
</tbody>
</table>
<button>删除选定</button>
<script> //查找thead下第一个th下的input
var chbAll=document.querySelector(
"thead th:first-child>input"
);
//查找tbody中所有第一个td下的input
var chbs=document.querySelectorAll(
"tbody td:first-child>input"
);
//为chbAll绑定单击事件
chbAll.onclick=function(){
//遍历chbs中每个chb
for(var i=0;i<chbs.length;i++){
//设置当前chb的checked等于this的checked
chbs[i].checked=this.checked;
}
}
//为chbs中每chb都绑定单击事件
for(var i=0;i<chbs.length;i++){
chbs[i].onclick=function(){
if(!this.checked)
chbAll.checked=false;
else{
//选择tbody下第一个td中的未选中的input
var unchecked=
document.querySelector(
"tbody td:first-child>input:not(:checked)"
);
if(unchecked===null)
chbAll.checked=true;
}
}
}
</script>
</body>
</html>
js实现checkbox组 全选和取消全选的更多相关文章
- JS对checkbox全选和取消全选
需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...
- bootstrap实现checkbox全选、取消全选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...
- js全选与取消全选
实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...
- jQuery --checkbox全选和取消全选简洁高效的解决办法
最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
- datagridview里面的checkbox全选和取消全选
全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...
- 使用AngularJS实现简单:全选和取消全选功能
这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...
- checkbox 全選、取消全選、反選
在寫一個全選.取消全選.反選的功能時. 未來元素[type='checkbox'],在使用了jquery-1.11.1.min.js版本的jquery時: 功能版本1: 存在的問題,當使用了attr時 ...
- react实现全选、取消全选和个别选择
react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...
随机推荐
- windows8系统安装MongoDB 2.6.3配置服务启动
转自:http://winfan.net/655.html 1. 下载mongodb包2. 解压zip至 D:\MongoDB3. 创建目录 D:\MongoDB\data\db4. 创建日志目录 D ...
- hibernate 一对多、多对多的配置
一对多 <class name="Question" table="questions" dynamic-insert="true" ...
- 从零到一创建ionic移动app:基础开发环境搭建
myAPP项目是在Ubuntu14.04下创建 本项目开发node 4.5/cordova 6/ionic 2 第一步 安装nodejs npm install -g n n v4.5.0 使 ...
- Python框架之Tornado(请求阶段)
上图是tornado程序启动以及接收到客户端请求后的整个过程,对于整个过程可以分为两大部分: 启动程序阶段,又称为待请求阶段(上图1.2所有系列和3.0) 接收并处理客户端请求阶段(上图3系列) 简而 ...
- HDU - 6406 Taotao Picks Apples (RMQ+dp+二分)
题意:N个高度为hi的果子,摘果子的个数是从位置1开始从左到右的严格递增子序列的个数.有M次操作,每次操作对初始序列修改位置p的果子高度为q.每次操作后输出修改后能摘到得数目. 分析:将序列分为左.右 ...
- Jsoup学习总结
Jsoup学习总结 摘要 Jsoup是一款比较好的Java版HTML解析器.可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方 ...
- hadoop18---socket实现rpc
客户端: package cn.itcast_04_reflect.socket; import java.io.BufferedOutputStream; import java.io.Buffer ...
- Linux性能测试分析命令_sar+iostat+vmstat+top
sar主要用于收集并统计系统资源的信息,包括CPU.IO.内存.网卡流量等. vmstat命令主要是对操作系统的虚拟内存.进程.IO读写.CPU活动等整体情况进行统计.但是它不能对某个进程进行深入分析 ...
- Django学习笔记之Ajax入门
AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JS ...
- kali安装后配置
0x00.安装Vmware Tools 由于是在VMware Workstation里面安装的,所以需要首先安装VMware tools工具方便我们Ctrl+C和Ctrl+V,步骤如下: 在VMWar ...