纯js代码实现列表全选和全不选的功能

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    * {

      padding: 0;

      margin: 0;

    }

    .wrap {

      width: 300px;

      margin: 100px auto 0;

    }

    table {

      border-collapse: collapse;

      border-spacing: 0;

      border: 1px solid #c0c0c0;

      width: 300px;

    }

    th,

    td {

      border: 1px solid #d0d0d0;

      color: #404060;

      padding: 10px;

    }

    th {

      background-color: #09c;

      font: bold 16px "微软雅黑";

      color: #fff;

    }

    td {

      font: 14px "微软雅黑";

    }

    tbody tr {

      background-color: #f0f0f0;

    }

    tbody tr:hover {

      cursor: pointer;

      background-color: #fafafa;

    }

  </style>

</head>

<body>

<div class="wrap">

  <table>

    <thead>

    <tr>

      <th>

        <input type="checkbox" id="j_cbAll"/>

      </th>

      <th>菜名</th>

      <th>饭店</th>

    </tr>

    </thead>

    <tbody id="j_tb">

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>红烧肉</td>

      <td>食堂</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>西红柿鸡蛋</td>

      <td>食堂</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>油炸榴莲</td>

      <td>食堂</td>

    </tr>

    <tr>

      <td>

        <input type="checkbox"/>

      </td>

      <td>清蒸螃蟹</td>

      <td>食堂</td>

    </tr>

    </tbody>

  </table>

</div>

<script>

  //获取全选的这个复选框

  var ckAll = getElementById("j_cbAll");

  //获取tbody中所有的小复选框

  var cks = getElementById("j_tb").getElementsByTagName("input");

  //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态

  ckAll.onclick = function () {

    //console.log(this.checked);

    for (var i = 0; i < cks.length; i++) {

      cks[i].checked = this.checked;

    }

  };

  //获取tbody中所有的复选框,分别注册点击事件

  for(var i=0;i<cks.length;i++){

    cks[i].onclick=function () {

      var flag=true;//默认都被选中了

      //判断是否所有的复选框都选中

      for(var j=0;j<cks.length;j++){

        if(!cks[j].checked){

          //没选中就进来了

          flag=false;

          break;

        }

      }

      //全选的这个复选框的状态就是flag这个变量的值

      ckAll.checked=flag;

    };

  }

</script>

</body>

</html>

JS小案例--全选和全不选列表功能的实现的更多相关文章

  1. node.js(小案例)_使用mongodb对学生信息列表优化

    一.前言 1.这篇文章主要对上一篇案列在操作增删改的时候使用mongodb进行优化 2.项目源码(包含上):https://github.com/4561231/crud-express-node.g ...

  2. JS小案例：循环间隔重复变色

    在A.B.C三个区块中,有且仅有一个红色,要求红色每隔一秒即进入下一个区块,变色过程不断循环往复. 参考代码: <!DOCTYPE html> <html lang="zh ...

  3. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  4. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  5. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  6. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  7. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  8. JS小案例(基础好烦恼少)----持续更新

    *************************************************** <!DOCTYPE html> <html lang="en&quo ...

  9. opencv.js小案例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. [thinkphp 5.0源码阅读] 缓存（一）

    保存缓存: user表数据: cache()方法保存缓存: 访问 http://mythinkphp.com/index/index/cache ,两个缓存被保存(runtime/cache目录下): ...

  2. 定位公众号页面，跳转之后 vuejs 失效问题

    是第一个页面的. data () { }, 写成了这样,没写返回 {} 5555~. 网页中死活可以,微信中死活不行. data () { return {} },

  3. luogu4061 大吉大利，晚上吃鸡！

    链接 最短路径\(dag\),一道好题. 题目大意:求一张图中满足下列要求的点对\((i,j)\)数量: 所有最短路径必定会经过 \(i\) 点和 \(j\) 点中的任意一点. 不存在一条最短路同时经 ...

  4. 前端学习记录（HTML篇）

    HTML Hyper Text Markup Language,超文本标记语言,不是一种编程语言,而是一种标记语言 思想:网页中有很多数据,不同的数据可能需要不同的显示效果,一个标签相当于一个容器,想 ...

  5. Github熟悉一

    Code/代码 Commits/提交 Issues/问题 Packages/包装 Marketplace/市场 Topics/话题 Wikis/维基百科 Users/用户 Pull requests/ ...

  6. jquery用法第二波

    过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $(“#id”) $("div[title=test]")选取titl ...

  7. 04 全局配置，java 编意默认版本，1.6.修改配置

    https://www.cnblogs.com/liu-s/p/5371289.html <!-- 修改Intellij Idea 创建maven项目默认Java编译版本 --> < ...

  8. [CSP-S模拟测试]:轰炸行动（bomb）（塔尖+拓扑排序+语文）

    题目描述 战狂也在玩<魔方王国>.他只会征兵而不会建城市,因此他决定对小奇的城市进行轰炸.小奇有n座城市,城市之间建立了$m$条有向的地下通道.战狂会发起若干轮轰炸,每轮可以轰炸任意多个城 ...

  9. noi.ac #712 练级

    分析 把船当作点 练级当作边 发现一个连通块大于n-1的边的条数的奇偶性影响这个连通块的答案 于是并查集维护即可 代码 #include<bits/stdc++.h> using name ...

  10. 奖项-MVP：MVP（微软最有价值专家）百科

    ylbtech-奖项-MVP:MVP(微软最有价值专家)百科 微软最有价值专家(MVP) 是指具备一种或多种微软技术专业知识,并且积极参与在线或离线的社群活动,经常与其他专业人士分享知识和专业技能,受 ...