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. 剑指offer例题——反转链表

    题目描述 输入一个链表,反转链表,输出新链表的表头 程序编写 将链表反转 public class Solution { public ListNode ReverseList(ListNode he ...

  2. 使用PandoraBox时的软件源配置

    src/gz 18.12_core http://downloads.pangubox.com:6380/pandorabox/18.12/targets/ralink/mt7621/packages ...

  3. Python3 复制和深浅copy

    赋值: 列表的赋值: list1 = ['peter','sam'] list2 = list1 print(list1,id(list1)) print(list2,id(list2)) list1 ...

  4. JAVA字符串类

    一.字符串类String1.String是一个类,位于java.lang包中2.创建一个字符串对象的2种方式: String 变量名=“值”; String 对象名=new String(“值”);3 ...

  5. C++中绝对值的运算

    首先,输入-42333380005结果取出来的绝对值却是616292955. 开始我以为是long型的取值范围有问题,就把long型全部改为long long型的了,结果还是一样,就觉得绝对值这个函数 ...

  6. python命名规则

    1 包.模块的命名规则:全部以小写字母形式来命名.比如:import random 2 类.对象的命名规则:类是每个单词的首字母要大写,其他字母小写比如:class MyFamily: ,类的私有属性 ...

  7. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  8. FortiGate路由模式--静态地址线路上网配置

    1.需求:外网接口使用专线,由运营商分配指定的静态地址,内网为192.168.1.0/24网段,实现基本上网功能. 运营商分配ip地址:202.1.1.10,网关地址:202.1.1.9, DNS:2 ...

  9. odoo研究学习：刷新本地模块列表都干了什么事？

    模块信息存储在ir.module.module 数据表中 平时在开发过程中经常会刷新本地模块列表,例如:新增了模块.更新了模块基础信息.更换了模块图标等等,在点击‘更新’按钮的时候odoo平台到底干了 ...

  10. Thinkphp5 表单提交额外参数和页面跳转参数传递url

    1. 表单提交 <input type="hidden" name="project_name" value="$project_name&qu ...