通过复选框的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. python3.7 json模块

    #!/usr/bin/env python __author__ = "lrtao2010" #python3.7 json模块 ''' 要在不同的编程语言之间传递对象,就必须把对 ...

  2. Fliptile POJ - 3279 （开关问题）

    Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 16483   Accepted: 6017 Descrip ...

  3. Codeforces Round #464 (Div. 2) E. Maximize!

    题目链接:http://codeforces.com/contest/939/problem/E E. Maximize! time limit per test3 seconds memory li ...

  4. 动态规划：HDU2159-FATE（二维费用的背包问题）

    FATE Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submi ...

  5. HDU1272小希的迷宫

    小希的迷宫 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一 ...

  6. 笔记-python-tutorial-8.errors and exceptions

    笔记-python-tutorial-8.errors and exceptions 1.      errors and exceptions 1.1.    syntax errors >& ...

  7. [原]sencha touch之panel和tabpanel

    最近在弄senchatouch的项目,所以边学习边开发,边记录,直接记录下test code如下: Panel: Ext.application({ name:'itKingApp', launch: ...

  8. 深入浅出Hyper-V网络虚拟化（序）

    服务器虚拟化已经越来越普及,很多企业也都在尝试着将现有业务转换成虚拟化的方式来运行,即在一个物理服务器上虚拟出多个实例,而每个实例彼此隔离,就好像在使用一台真实主机一样:网络虚拟化也同样如此,在同一条 ...

  9. 微信小程序-----校园头条详细开发之首页

    1.首页展示功能的实现 1.1  结构 1.2 代码实现 1.2.1  界面的设计这里就不多说了,样式都是我自己写的,还有就是页面的跳转,看详细代码 var app = getApp() Page({ ...

  10. 只显示前几条数据的sql语句写法 七种数据库中Select Top的使用方法

    七种数据库中Select Top的使用方法 1. Oracle数据库 SELECT * FROM TABLENAME WHERE ROWNUM <= N 2. Infomix数据库 SELECT ...