JS实现全选

 
嗨，同学们好，老师这里是专门教同学解决一些针对性的问题，所以说综合起来，就要靠同学自己了。
这节课我们学一个很实用的东西，全选操作！比如淘宝这种商城对吧，我的购物车，我要全选购买，或者删除，一个一个的来肯定麻烦，所以就有了全选和批量处理，那就是复选框！
 
这里我们用一个table表格来控制吧！看代码：
 
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>JS全选，复选框</title>

</head>

<body>

<table id="mytable">

    <tr>

        <th><input type="checkbox" id="quan"/></th>

        <th>序号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>地址</th>

    </tr>

    <tr>

        <td><input type="checkbox"/></td>

        <td>1</td>

        <td>张三</td>

        <td>女</td>

        <td>四川省成都市</td>

    </tr>

    <tr>

        <td><input type="checkbox"/></td>

        <td>2</td>

        <td>李斯</td>

        <td>女</td>

        <td>四川省成都市</td>

    </tr>

    <tr>

        <td><input type="checkbox"/></td>

        <td>3</td>

        <td>玩玩玩</td>

        <td>男</td>

        <td>四川省成都市</td>

    </tr>

    <tr>

        <td><input type="checkbox"/></td>

        <td>4</td>

        <td>哈哈哈</td>

        <td>女</td>

        <td>四川省成都市</td>

    </tr>

</table>

<script>

    // onload事件 页面加载完直接运行

    window.onload = function () {

        var mytable = document.getElementById("mytable");

        var qq = document.getElementById("quan");

        mytable.style.border = "1px solid gray";

        mytable.style.borderCollapse = "collapse";

        mytable.style.textAlign = "center";

        mytable.style.width = "800px";

        //以上是给table表格添加样式

        //使用循环获取到表格的tr长度

        for (i = 1; i < mytable.rows.length; i++) {

            //因为复选框是tr里的第一个，所以cells里的数组下标为0

            mytable.rows[i].cells[0].firstChild.onclick = function () {

                //当我点击它，就做判断

                //先判断它本身是被选中的就往下面走

                if (this.checked) {

                    //如果它被选中我们就走进for循环

                    for (j = 1; j < mytable.rows.length; j++) {

                        //获取tr的长度，然后判断所有的复选框

                        if (!mytable.rows[j].cells[0].firstChild.checked) {

                            //如果这些复选框，有一个没有被选中，全选就变成未被选中

                            qq.checked = false;

                            return true;

                            //最后结束返回 true

                        }

                    }

                    //if判断，所有复选框都是选中的，就让全选变成true 变成选中

                    qq.checked=true;

                }

                else {

                    //如果它本身没有被选中，全选当然是变成false 未被选中

                    qq.checked = false;

                }

            }

        }

        //点击全选的复选框，将所有的复选框变成和它一样，要么选中，要么未选中

        qq.onclick=function() {

            for (i = 1; i < mytable.rows.length; i++) {

                mytable.rows[i].cells[0].firstChild.checked = this.checked;

            }

        };

        //以下是循环并判断表格里的tr和td，添加css样式

        for (i = 0; i < mytable.rows.length; i++) {

            if (i == 0) {

                mytable.rows[0].style.backgroundColor = "lightgray";

            } else {

                mytable.rows[i].onmouseover = function () {

                    this.style.backgroundColor = "red";

                };

                mytable.rows[i].style.cursor = "pointer";

                if (i % 2 == 0) {

                    mytable.rows[i].style.backgroundColor = "yellow";

                    mytable.rows[i].onmouseout = function () {

                        this.style.backgroundColor = "yellow";

                    }

                } else {

                    mytable.rows[i].style.backgroundColor = "orange";

                    mytable.rows[i].onmouseout = function () {

                        this.style.backgroundColor = "orange";

                    }

                }

            }

            for (j = 0; j < mytable.rows[i].cells.length; j++) {

                var c = mytable.rows[i].cells[j];

                c.style.border = "1px solid gray";

            }

        }

    }

</script>

</body>

</html>
 
以上代码，同学们主要看的不是给table表格添加样式，当然了，最下面的代码，判断和循环那里可以多看看，是什么意思，我没写注释，重点是，全选的操作那里。
代码同学们可以直接copy拿走，但是一定要了解里面的代码，这样你修改成自己的代码也就简单了，而且以后自己才能写出来哦。
 

第十六篇 JS实现全选操作的更多相关文章

  1. 利用js写全选操作

    <script type="text/javascript"> function checkall(qx) { var ck=document.getElementsB ...

  2. Python之路【第十六篇】：Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  3. 跟我学SpringCloud | 第十六篇：微服务利剑之APM平台（二）Pinpoint

    目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...

  4. Egret入门学习日记 --- 第十六篇（书中 6.10~7.3节 内容）

    第十六篇(书中 6.10~7.3节 内容) 昨天搞定了6.9节,今天就从6.10节开始. 其实这个蛮简单的. 这是程序员模式. 这是设计师模式. 至此,6.10节 完毕. 开始 6.11节. 有点没营 ...

  5. 解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀（译）

    解剖SQLSERVER 第十六篇 OrcaMDF RawDatabase --MDF文件的瑞士军刀(译) http://improve.dk/orcamdf-rawdatabase-a-swiss-a ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

  9. JS实战 · 复选框全选操作

    思路: 1.获取被选中checkbox,通过checked属性的状态完成: 2.获取被选中的checkbox的value值: 3.求所有value的和sum: 4.定义span区域存储和sum:   ...

随机推荐

  1. Mysql general_log 日志详解

    开启 general log  将所有到达MySQL Server的SQL语句记录下来. 一般不会开启开功能,因为log的量会非常庞大.但个别情况下可能会临时的开一会儿general log以供排障使 ...

  2. [spring]基于注解的spring配置

    Spring是一个基于IOC和AOP的结构J2EE系统的框架 IOC 反转控制 是Spring的基础,Inversion Of Control 简单说就是创建对象由以前的程序员自己new 构造方法来调 ...

  3. Selenium 2自动化测试实战22（处理HTML5的视频播放）

    一.处理HTML5的视频播放 大多数浏览器使用控件(如Flash)来播放视频,但是,不同的浏览器需要使用不同的插件.HTML5定义了一个新的元素<video>,指定了一个标准的方式来嵌入电 ...

  4. 小D课堂 - 新版本微服务springcloud+Docker教程_3-02CAP理论知识

    笔记 2.分布式应用知识CAP理论知识     简介:讲解分布式核心知识CAP理论 CAP定理:             指的是在一个分布式系统中,Consistency(一致性). Availabi ...

  5. 小D课堂 - 新版本微服务springcloud+Docker教程_汇总

    小D课堂 - 新版本微服务springcloud+Docker教程_1_01课程简介 小D课堂 - 新版本微服务springcloud+Docker教程_1_02技术选型 小D课堂 - 新版本微服务s ...

  6. C基础知识(11)：错误处理

    C语言不提供对错误处理的直接支持,但是作为一种系统编程语言,它以返回值的形式允许您访问底层数据.在发生错误时,大多数的C或UNIX函数调用返回1或NULL,同时会设置一个错误代码errno,该错误代码 ...

  7. Datafactory 实际使用案例

    Datafactory 实际使用案例 一.       简介 QuestDataFactory 是一种快速的.易于产生测试数据工具,它能建模复杂数据关系,且有带有GUI界面.DataFactory是一 ...

  8. Django模板系统-内置和自定义Filters

    django模板中最常用的两种特殊符号是 {{ }} 用来表示变量和 {% %} 用来表示逻辑相关的操作 变量 {{ 变量名 }} ,由字母数字下划线组成而.在模板语言中有特殊含义,用来获取对象相应的 ...

  9. 使用torchvision下载数据集显示没有模板

    配置: Anaconda+Windows+py3.7 一:首先先卸载开始的torchvision:pip uninstall torchvision 二:找到官网:https://pypi.org/p ...

  10. 【转载】深度学习中softmax交叉熵损失函数的理解

    深度学习中softmax交叉熵损失函数的理解 2018-08-11 23:49:43 lilong117194 阅读数 5198更多 分类专栏: Deep learning   版权声明:本文为博主原 ...