实现全选与取消全选的效果
要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消
思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值给下面所有复选框的check值
要求2(士兵影响将军): 当下面的某个复选框没有被选中时,全选按钮自动变为没被选中状态;当下面的所有复选框被选中时,全选按钮自动被选中
                                        
 
首先,写出如下的表格:
 

布局部分:

 <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全选与取消全选的更多相关文章

  1. JS对checkbox全选和取消全选

    需求:checkbox控制列表数据全选与取消全选择. 效果图: 1.html <body > <input type="button" name="in ...

  2. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  3. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  4. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  5. bootstrap实现checkbox全选、取消全选

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 ...

  6. jQuery --checkbox全选和取消全选简洁高效的解决办法

    最近在公司做了一个小项目,其中有一个全选和取消全选的这么一个模块,搞了半天找不到一种最佳的解决方案!后来通过各种努力找到了一种简洁高效的解决办法,这里想和大家分享一下.有问题的话,还望各路大神指导一二 ...

  7. react实现全选、取消全选和个别选择

    react里面实现全选和取消全选,个别选择等操作,效果如下 代码: import React, {Component} from 'react' export default class Demo e ...

  8. DataGridView添加一行数据、全选、取消全选、清空数据、删除选中行

    .net 2005下的Windows Form Application,一个DataGridView控件和4个Button,界面设置如下:         代码如下,有注解,相信大家都看得明白:   ...

  9. datagridview里面的checkbox全选和取消全选

    全选 设置全选button,选中所有的checkbox private void selectAll_Click(object sender, EventArgs e) { //遍历datagridv ...

随机推荐

  1. 用了三星Dex,我已经快一个月回家没开过电脑了

    其实比较早就知道手机使用显示屏扩展的功能,但是以前的技术可能受性能影响体验还不太好.后来让我期待的是Linux On Dex这个项目知道了手机已经如此强大了,可惜只能是是特定机器,因此在618之际乘着 ...

  2. css基础5

    今天在这里跟大家分享css基础最核心的部分,浮动和定位.话不多说,直接上干货! 一.浮动 定义:定位元素是相对于其正常位置应该出现的位置.定位元素的位置是相对于自身.父级元素位置.其他元素以及浏览器窗 ...

  3. linux svn 中文 https://my.oschina.net/VASKS/blog/659236

    https://my.oschina.net/VASKS/blog/659236 设置服务器: export LC_ALL=zh_CN.UTF-8长久之计, echo export LC_ALL=zh ...

  4. hdu6375 度度熊学队列

    度度熊学队列 题目传送门 解题思路 STL大法好.直接用deque,但是N的范围很大,如果直接开那么多的deque会爆内存,所以用map< int, deque< int>>, ...

  5. thinkphp 数据库操作

    //所有的数据中,查出某个字段$result = $music->field('music')->select();$hotlist = M('News')->where('stat ...

  6. vmware虚拟机三种网卡

    vmware虚拟机三种网卡   vmware为我们提供了三种网络工作模式,它们分别是:Bridged(桥接模式).NAT(网络地址转换模式).Host-Only(仅主机模式). 打开vmware虚拟机 ...

  7. 第15个算法-实现 Trie (前缀树)(LeetCode)

    解法代码来源 :https://blog.csdn.net/whdAlive/article/details/81084793 算法来源:力扣(LeetCode)链接:https://leetcode ...

  8. python网络爬虫(14)使用Scrapy搭建爬虫框架

    目的意义 爬虫框架也许能简化工作量,提高效率等.scrapy是一款方便好用,拓展方便的框架. 本文将使用scrapy框架,示例爬取自己博客中的文章内容. 说明 学习和模仿来源:https://book ...

  9. SpringBoot日志相关

    SpringBoot使用的是SLF4j当门面,Logback当实现完成 日志级别 数字越大,级别越高,框架只会输出大于等于当前日志级别的信息 ERROR 40 WARN 30 INFO 20 DEBU ...

  10. VIM常用命令速查(转)