javascript实现复选框的全选全不选

时间：2022-03-23 23:43:27

通过复选框的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学习&lpar;8&rpar;——CheckBox多选框使用及动态更改多选框数据

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

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

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

  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. html&sol;css 布局练习3

    效果图:

  2. 【230】4T硬盘如何完全利用（GPT）

    参考:如何选择超过2T和3T及以上硬盘的MBR与GPT分区形式 新购置的硬盘是 4TB 的,装上后只能用 2TB 的,查明后得知是因为 MBR 只支持 2TB 的(默认情况下是 MBR 分区形式的), ...

  3. Windows Azure 社区新闻综述（&num;72 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章 ·   在 Windows Azure 移 ...

  4. 排名前10的H5、Js 3D游戏引擎和框架

    由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平*立,它们能在iOS.A ...

  5. IPV6与IPV4的区别

    IPv4协议的地址长度是32位,IPv6协议的地址长度是128位. 1.表示方式 IPv4地址表示为点分十进制格式,32位的地址分成4个8位分组,每个8位以十进制数显式,中间用点号分隔. 而IPv6采 ...

  6. MongoDB学习笔记（二）

    一.Mongodb命令 说明:Mongodb命令是区分大小写的,使用的命名规则是驼峰命名法. 对于database和collection无需主动创建,在插入数据时,如果database和collect ...

  7. 4&period;镜像管理【Docker每天5分钟】

    Docker给PaaS世界带来的“降维打击”,其实是提供了一种非常便利的打包机制.该机制打包了应用运行所需要的整个操作系统,从而保证了本地环境和云端环境的高度一致,避免了用户通过“试错”来匹配不同运行 ...

  8. 5&period; Failed to configure a DataSource&colon; &&num;39&semi;url&&num;39&semi; attribute is not specified and no embedded datasource could be configured&period;

    解决方案,见  https://www.jianshu.com/p/836d455663da

  9. org&period;springframework&period;dao&period;InvalidDataAccessResourceUsageException&colon; Unexpected cursor position change&period; Spring Batch 错误

    在用SpringBatch 跑job的时候出现这个错误, 由于取数据的DB 是netezza, 框架可能支持的不是很全面,当然也可能是其他原因. <bean id="reader_rd ...

  10. U盘快速启动热键

    各个品牌电脑U盘快速启动热键如下:

相关文章