实现全选与取消全选的效果
要求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. RSA premaster secret error 错误解决

    报错信息如下: Caused by: com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法使用安全套接字层(SSL)加密与 SQL Serve ...

  2. C#3.0新增功能10 表达式树 01 简介

    连载目录    [已更新最新开发文章,点击查看详细] 如果你使用过 LINQ,则会有丰富库(其中 Func 类型是 API 集的一部分)的经验. (如果尚不熟悉 LINQ,建议阅读 LINQ 教程,以 ...

  3. Java秒杀系统实战系列~整体业务流程介绍与数据库设计

    摘要: 本篇博文是“Java秒杀系统实战系列文章”的第三篇,本篇博文将主要介绍秒杀系统的整体业务流程,并根据相应的业务流程进行数据库设计,最终采用Mybatis逆向工程生成相应的实体类Entity.操 ...

  4. C#命名规范（简述）

    命名空间,类,事件,接口,常量,属性,方法使用Pascal命名,即首字母大写  参数,变量(类字段)使用camel命名法,即首字母小写. Pascal 方式--所有单词第一个字母大写,其他字母小写.  ...

  5. 自动生成Mybatis的Mapper文件

    自动生成Mybatis的Mapper文件 工作中使用mybatis时我们需要根据数据表字段创建pojo类.mapper文件以及dao类,并且需要配置它们之间的依赖关系,这样的工作很琐碎和重复,myba ...

  6. vue教程(五)--路由router介绍

    一.html页面中如何使用 1.引入 vue-router.js 2.安装插件 Vue.use(VueRouter) 3.创建路由对象 var router = new VueRouter({ // ...

  7. .NET Core CSharp初级篇 1-8泛型、逆变与协变

    .NET Core CSharp初级篇 1-8 本节内容为泛型 为什么需要泛型 泛型是一个非常有趣的东西,他的出现对于减少代码复用率有了很大的帮助.比如说遇到两个模块的功能非常相似,只是一个是处理in ...

  8. ASP.NET Core Web Api之JWT VS Session VS Cookie(二)

    前言 本文我们来探讨下JWT VS Session的问题,这个问题本没有过多的去思考,看到评论讨论太激烈,就花了一点时间去研究和总结,顺便说一句,这就是写博客的好处,一篇博客写出有的可能是经验积累,有 ...

  9. LinkedHashMap的特殊之处

    一.前言 乍眼一看会怀疑或者问LinkedHashMap与HashMap有什么区别? 它有什么与众不同之处?  由于前面已经有两篇文章分析了HashMap,今天就看看LinkedHashMap.(基于 ...

  10. CTF杂项题解题思路

    下载压缩包解压 如果是图片就先查看图片信息 没有有用信息查看图片看是否是一个图片 如果不是图片就将文件进行还原 从还原文件中查找有用信息 例:这是一张单纯的图片 http://123.206.87.2 ...