通过复选框的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 正则表达式与JSON字符串

    目录 正则表达式 概括单字符集 匹配单字符 匹配字符集 普通字符与元字符 元字符和普通的字符的混用 数量词{整数|*|+|?} 匹配指规则的字母 贪婪模式 匹配指定长度的字符串 非贪婪模式 匹配指定长 ...

  2. python之格式化

    python有两种方式可以格式化一种是用%s,一种使用format(2.6)进入的,从下面的代码可以看出,效果差不多. name = 'edward' age = 27 print("My ...

  3. 2940: [Poi2000]条纹（Multi_SG）

    2940: [Poi2000]条纹 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 114  Solved: 72[Submit][Status][Dis ...

  4. Failed to find provider info for com.tencent.mm.sdk.plugin.provider

    微信启动的时候可以调用,微信没启动,调用支付报这个错误. 我的问题是 微信发开着的jar包不是最新的,去官方网站下一个最新的就可以成功了.

  5. LoadRunner11的安装和使用及其注意点(测试系统是win7)

    一.安装 LoadRunner11的下载地址:http://www.ddooo.com/softdown/61971.htm 链接标题里[loadrunner11 中文破解版]实质上下载下来是没有破解 ...

  6. 46、android studio第一次使用时卡在gradle下载怎么解决？

    如果没法FQ或者FQ后网速慢,哥教你一个快速解决方案. 在根目录下的.gradle目录下,找到wrapper/dists目录,如果当前正在下载gradle.x.xx-all.zip,那么会发现grad ...

  7. MOCTF 简单注入

    最近在练习sql注入写脚本,记录一下思路,刚学的and 1=1也拿出来溜溜 http://119.23.73.3:5004/?id=1 首先,没有被过滤是正常显示. 没有被过滤但是查询不到就是空白,比 ...

  8. Python学习-day11 RabbitMQ Redis

    这次文章包含两个内容: 1.RabbitMQ使用 2.Redis基础操作 代码部分为练习笔记和作业 概念部分转自Alex老师 RabbitMQ 安装 http://www.rabbitmq.com/i ...

  9. Spring框架annotation实现IOC介绍

    Spring学习笔记(三) 续Spring 学习笔记(二)之后,对Spring框架的annotation实现方法进行整理 本文目录 @Autowire 1 @Autowire+@Qualifier t ...

  10. jquery版手风琴效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...