通过复选框的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. printf("\033[1;33m ***** \033[0m \n");

    printf("\033[1;33m Hello World. \033[0m \n"); 颜色如下: none = "\033[0m" black = &qu ...

  2. js：随记

    typeof:没有大写,因为typeof是运算符 *1:是转数字 +string:是转数字,在Date对象上是getTime ""+:是转字符串 "":bool ...

  3. PHP的抽象类、接口的区别和选择

    1.对接口的使用是通过关键字implements.对抽象类的使用是通过关键字extends.当然接口也可以通过关键字extends继承. 2.接口中不可以声明成员变量(包括类静态变量),但是可以声明类 ...

  4. angular用$sce服务来过滤HTML标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  5. loj2073 「JSOI2016」扭动的回文串

    ref 主要是要理解"撑到"最长这个概念 (为啥我的代码这么长QAQ #include <iostream> #include <cstdio> using ...

  6. MOCTF-火眼金睛

    MOCTF-火眼金睛 http://119.23.73.3:5001/web10/ 把这个题目当作python爬虫来练习. 首先要获取到文本框里面的全部信息, import requests impo ...

  7. csu-2018年11月月赛Round2-div1题解

    csu-2018年11月月赛Round2-div1题解 A(2191):Wells的积木游戏 Description Wells有一堆N个积木,标号1~N,每个标号只出现一次 由于Wells是手残党, ...

  8. [oldboy-django][6其他]rest framwork有关事

    官网地址: https://github.com/encode/django-rest-framework 英文教程:http://www.django-rest-framework.org/tuto ...

  9. 【bzoj3687】简单题 背包dp+STL-bitset

    题目描述 小呆开始研究集合论了,他提出了关于一个数集四个问题:1．子集的异或和的算术和.2．子集的异或和的异或和.3．子集的算术和的算术和.4．子集的算术和的异或和.目前为止,小呆已经解决了前三个问题 ...

  10. bzoj3105【CQOI2013】新nim游戏

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=3105 sol  :要想必胜则拿完后异或空间不能包含0,即给对手留下一组线性基 为保证拿走的最小 ...