HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

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

        <script>

            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++) {

                        //8.拿到每一个复选框，并将其状态置为未选中

                        checkOnes[i].checked = false;

                    }

                }

            }

        </script>

    </head>

    <body>

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

            <thead>

                <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>

效果：

点击则全选中，再次点击取消全选

DOM的简单应用：

动态添加：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>动态添加城市</title>

        <script>

            window.onload = function() {

                document.getElementById("btn").onclick = function() {

                    //1.获取ul元素节点

                    var ulEle = document.getElementById("ul1");

                    //2.创建城市文本节点

                    var textNode = document.createTextNode("深圳"); //深圳

                    //3.创建li元素节点

                    var liEle = document.createElement("li"); //<li></li>

                    //4.将城市文本节点添加到li元素节点中去

                    liEle.appendChild(textNode); //<li>深圳</li>

                    //5.将li添加到ul中去

                    ulEle.appendChild(liEle);

                }

            }

        </script>

    </head>

    <body>

        <input type="button" value="添加新城市" id="btn" />

        <ul id="ul1">

            <li>北京</li>

            <li>上海</li>

            <li>广州</li>

        </ul>

    </body>

</html>

JS应用实例5：全选、动态添加的更多相关文章

  1. JS中表格的全选和删除要注意的问题

    在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...

  2. Android高级控件（一）——ListView绑定CheckBox实现全选，添加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...

  3. JS实现表单全选以及取消全选实例

    实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...

  4. echarts图标legend全选功能添加

    平时做图表的时候经常用echarts,确实是一款很好用的插件. 开发中遇到了一个问题,在展示的曲线,也就是legend很多的时候,不太好只展示其中几条.配置中是可以默认设置初始化是否展示,但不适用于全 ...

  5. vue.js 批量删除跟全选，反选效果

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

  6. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  7. js实现checkbox的全选和全不选功能

    html代码: <form name="form1" method="post" action="manage.php?act=sub" ...

  8. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  9. js遍历对象的属性并且动态添加属性

    var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...

  10. asp.net中Repeater结合js实现checkbox的全选/全不选

    前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...

随机推荐

  1. 深入剖析GPU Early Z优化

    最近在公司群里同事发了一个UE4关于Mask材质的优化,比如在场景中有大面积的草和树的时候,可以在很大程度上提高效率.这其中的原理就是利用了GPU的特性Early Z,但是它的做法跟我最开始的理解有些 ...

  2. 一个RTSP/RTP over TCP 的丢包引起的问题

    背景知识:可以查看https://www.cnblogs.com/lidabo/p/4483497.html RTSP/RTP over TCP TCP承载RTSP/RTP   When you us ...

  3. 【原】 The Linux Command Line- pwd,cd,ls,file,less

    pwd - print name of current working directory. cd - change directory ls - list directory contents fi ...

  4. CSS 表单

    输入框前有图片 老板让你实现在输入框前有图片的功能.老板觉得用图片代替文字更有说服力. 要实现这样的功能很简单,它的原理是将图片放在内边距内. 代码 1 2 3 4 5 6 7 8 9 10 11 1 ...

  5. Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行

    Windows Server 2008中使用计划任务定时执行BAT bat进行PHP脚本的执行 2016年01月03日 17:36:00 持之以恒 阅读数:5520 标签: windows定时任务.b ...

  6. py2与py3区别总结

    1. py2中的str是py3中的bytes py2中的Unicode是py3中的str 声明一个字符串变量时,py2 和py3都是str类型,但py2代表字节类型,py3代表文本类型 隐式转换: p ...

  7. JQEUERY案例

    案例效果: 点击显示全部奶粉品牌前: 点击后: 源码: <!DOCTYPE html><html><head> <meta charset="utf ...

  8. AFNetWorking 源码粗浅理解

    最近在看AFNetWorking的源码,整理出自己的一点思路.先从一个最简单的网络请求看: NSString *urlStr = [NSString stringWithFormat:@"h ...

  9. io.netty.resolver.dns.DnsNameResolverContext

    java.net.UnknownHostException: failed to resolve 'xxx.com' after 3 queries at io.netty.resolver.dns. ...

  10. 飞鱼星、H3C企业路由器配置

    飞鱼星企业路由器配置外网访问IIS 只配置端口映射就行,配置好了,如果不立即重启,需要等几分钟才能生效 H3C路由器配置虚拟服务器即可