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. HashMap理解

    HashMap中Capacity为数组长度,默认大小为16,size为元素个数,loadFactor为size/capacity,默认为0.75,当存储的元素个数size大于等于capacity乘以0 ...

  2. 【392】Python 列表解析

    参考: Python3 数据结构 | 菜鸟教程 列表推导式 列表推导式提供了从序列创建列表的简单途径.通常应用程序将一些操作应用于某个序列的每个元素,用其获得的结果作为生成新列表的元素,或者根据确定的 ...

  3. Mad Lids游戏 华氏与摄氏温度转换

    name1 = input('请输入一个名字:') name2 = input('请输入一个名字:') vehicle = input('请输入一种车子:') print('\n上近代史的{}刚下课, ...

  4. faster rcnn源码阅读笔记3

  5. JAVA获取系统信息以及系统时间

    在做测试的时候,经常需要获取系统信息,并且用获取到的系统时间给生成的报告取名字. 以下代码实在TestNG展示的,没有Test NG的话需要些一个main方法. import java.net.Ine ...

  6. 使用 Composer 安装Laravel扩展包的几种方法

    使用 Composer 安装Laravel扩展包的几种方法 以下的三种方法都是需要你在项目的根目录运行 第一种:composer install 如有 composer.lock 文件,直接安装,否则 ...

  7. Git的操作方法

    创建仓库 git clone 加上你的远程仓库克隆下来 git add . 把你文件里面的改动更改添加到git里面 git status 查看状态,更新了那些内容 git commit -m" ...

  8. linux用户和组管理，/etc/passwd 、/etc/shadow和/etc/group --学习

    一./etc/passwd 和/etc/shadow解释 与用户相关的系统配置文件主要有/etc/passwd 和/etc/shadow,其中/etc/shadow是用户资讯的加密文件,比如用户的密码 ...

  9. react项目搭建

    1.下载安装node.js,需要node.js环境. 2.经过挑选,决定选择creat-react-app这个项目脚手架,然后输入指令安装          $ npm install -g crea ...

  10. [leetcode]25. Reverse Nodes in k-Group每k个节点反转一下

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. k  ...