通过复选框的id获取到复选框 元素 对复选框绑定点击事件

每个checkbox都设置相同的name checkOne

通过得到的元素获取checkbox的状态

当点击全选全不选checkbox时，检查全选全不选的box状态，如果为true

就将所有其他box状态都设置为true

如果全选全不选的状态为false，相应的就将其他所有的box状态checked设置为false

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>全选和全不选</title>

        <script type="text/javascript">

            function checkAll(){

                //1.获取编号前面的复选框

                var checkAllEle=document.getElementById("checkAll");

                //2.对编号前面复选框的状态进行判断

                if(checkAllEle.checked==true){

                    //3.获取下面所有的复选框

                    var checkOnes=document.getElementsByName("checkOne");

                    //4.对获取的复选框进行遍历

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

                        //5.拿前面的一个复选框，并将其状态置为选中

                        checkOnes[i].checked=true;

                    }

                }else{

                    //6.获取下面所有的复选框

                    var checkOnes=document.getElementsByName("checkOne");

                    //7.对获取的所有复选框进行遍历

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

                        checkOnes[i].checked=false;

                    }

                }

            }

        </script>

    </head>

    <body>

        <table border="1" width="500" height="50" align="center" >

            <thead>

                <tr>

                    <td colspan="4">

                        <input type="button" value="添加" />

                        <input type="button" value="删除" />

                    </td>

                </tr>

                <tr>

                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>

                    <th>编号</th>

                    <th>姓名</th>

                    <th>年龄</th>

                </tr>

            </thead>

            <tbody>

                <tr >

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

                    <td>1</td>

                    <td>张三</td>

                    <td>22</td>

                </tr>

                <tr >

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

                    <td>2</td>

                    <td>李四</td>

                    <td>25</td>

                </tr>

                <tr >

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

                    <td>3</td>

                    <td>王五</td>

                    <td>27</td>

                </tr>

                <tr >

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

                    <td>4</td>

                    <td>赵六</td>

                    <td>29</td>

                </tr>

                <tr >

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

                    <td>5</td>

                    <td>田七</td>

                    <td>30</td>

                </tr>

                <tr >

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

                    <td>6</td>

                    <td>汾九</td>

                    <td>20</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

javascript实现复选框的全选全不选的更多相关文章

  1. 复选框（checkbox）、多选框

    1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

  2. Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据

    原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...

  3. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  4. jQuery实现checkbox（复选框）选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  5. 复选框（checkox）全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  6. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  7. 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    <%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...

  8. checkbox 多选框 ：jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  9. checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    <input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...

  10. 转载：Bootstrap之表格checkbox复选框全选

    转:http://blog.csdn.net/shangmingchao[商明超的博客] 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 版权声明:如需 ...

随机推荐

  1. Python的集合与字典练习

    集合与字典练习 question1 问题描述:有一个列表,其中包括 10 个元素,例如这个列表是[1,2,3,4,5,6,7,8,9,0],要求将列表中的每个元素一次向前移动一个位置,第一个元素到列表 ...

  2. Python3爬取人人网（校内网）个人照片及朋友照片，并一键下载到本地~~~附源代码

    题记: 11月14日早晨8点,人人网发布公告,宣布人人公司将人人网社交平台业务相关资产以2000万美元的现金加4000万美元的股票对价出售予北京多牛传媒,自此,人人公司将专注于境内的二手车业务和在美国 ...

  3. 静态属性property的本质和应用

    一.本质 静态属性property本质就是实现了get,set,delete三种方法 class Foo: @property def AAA(self): print('get的时候运行我啊') @ ...

  4. visual studio cl -d1reportSingleClassLayout查看内存f分布

    C:\Users\Administrator\Desktop\cppsrc>cl -d1reportSingleClassLayoutTeacher virtual.cpp 用于 x86 的 M ...

  5. I2C总线协议图解（转载）

    转自:http://blog.csdn.net/w89436838/article/details/38660631 另外,https://blog.csdn.net/qq_38410730/arti ...

  6. c++ 操作符优先级

    优先级 操作符 描述 例子 结合性 1 ()[]->.::++-- 调节优先级的括号操作符数组下标访问操作符通过指向对象的指针访问成员的操作符通过对象本身访问成员的操作符作用域操作符后置自增操作 ...

  7. Codeforces Round #496 (Div. 3) ABCDE1

    //B. Delete from the Left #include <iostream> #include <cstdio> #include <cstring> ...

  8. wim

    wim 编辑 WIM是英文Microsoft Windows Imaging Format(WIM)的简称,它是Windows基于文件的映像格式.WIM 映像格式并非现在相当常见的基于扇区的映像格式, ...

  9. git+jenkins持续集成三-定时构建语法

    构建位置:选择或创建工程_设置_构建触发器 1. 定时构建语法:* * * * * (五颗星,多个时间点,中间用逗号隔开)第一个*表示分钟,取值0~59第二个*表示小时,取值0~23第三个*表示一个月 ...

  10. 数组线性表ArrayList 和链表类LinkedList

    数组线性表类ArrayList 和链表类LinkedList 是实现List接口的两个具体类.ArrayList 数组储存元素,这个数组是动态创建的.如果元素个数超过了数组的容量,就创建一个更大的新数 ...