做后台管理程序时,用到一个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组 全选和取消全选的更多相关文章

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

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

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

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

  3. js全选与取消全选

    实现全选与取消全选的效果 要求1(将军影响士兵):点击全选按钮,下面的复选框全部选中,取消全选按钮,下面的复选框全部取消 思路:复选框是否被选中,取决于check属性,将全选按钮的check属性值赋值 ...

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

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

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

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

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

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

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

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

  8. checkbox 全選、取消全選、反選

    在寫一個全選.取消全選.反選的功能時. 未來元素[type='checkbox'],在使用了jquery-1.11.1.min.js版本的jquery時: 功能版本1: 存在的問題,當使用了attr時 ...

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

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

随机推荐

  1. 29最小的K个数

    题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,.   思路: 利用快速排序的partion 来解决 如果基于数字的第 ...

  2. Python框架之Tornado（请求）

    概述 本篇就来详细介绍tornado服务器(socket服务端)是如何接收用户请求数据以及如果根据用户请求的URL处理并返回数据,也就是上图的3系列所有步骤,如上图[start]是一个死循环,其中利用 ...

  3. Building an FTP Test Plan

    参考:http://jmeter.apache.org/usermanual/build-ftp-test-plan.html 1.创建一个线程组 2.线程组--->添加--->配置元件- ...

  4. Tomcat 优化相关知识

    ---------(Tomcat Listener)----------- Tomcat 性能的因素是内存泄露.Server标签中可以配置多个Listener,其中 JreMemoryLeakPrev ...

  5. 20145219 《Java程序设计》第01周学习总结

    20145219 <Java程序设计>第01周学习总结 教材学习内容总结 软件分类:系统软件(DOS.Windows.Linux等).应用软件(扫雷.QQ等) 人机交互方式:图形化界面.命 ...

  6. JMeter学习（二）工具简单介绍

    一.JMeter 介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件, ...

  7. Java JDBC概要总结一(基本操作和SQL注入问题)

    JDBC定义: JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API.JDBC是Java访问数据库的标准规范,可以为不同的关系 ...

  8. HBase 协处理器---基本概念和regionObserver的简单实现

    1. 简介 对于HBase的协处理器概念可由其官方博文了解:https://blogs.apache.org/hbase/entry/coprocessor_introduction 总体来说其包含两 ...

  9. jsp基础知识点——思维导图

    如图 思维导图图片链接 http://www.edrawsoft.cn/viewer/public/s/0b8cd083478732 有道云笔记图片链接 http://note.youdao.com/ ...

  10. Codeforces Round #365 (Div. 2) D.Mishka and Interesting sum 树状数组+离线

    D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megabytes in ...