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. tfs填坑那些事

    1.csdn下载  安装(步1:装 步2:激活 步3:配置数据库之类 选择完全配置)激活(win7能出来,win10不出来) 注意 tfs服务开启,,代理服务开启 2.选择敏捷模板 3.无法新建项目, ...

  2. 从零开始搭建自己的VueJS2.0+ElementUI单页面网站（一、环境搭建）

    原网址:https://blog.csdn.net/u012907049/article/details/72764151 前言 VueJS可以说是近些年来最火的前端框架之一,越来越多的网站开始使用v ...

  3. CSS3实现投影效果

    Webkit引擎定义了-webkit-box-reflect属性,该属性能够实现投影效果,具体语法如下: -webkit-box-reflect: <direction> <offs ...

  4. 深入浅出PF 学习笔记---通过资源文件设置按钮的Style及通过x:null设置不受Style影响

    <Window x:Class="WpfStudy2018.StyleButton" xmlns="http://schemas.microsoft.com/win ...

  5. 网络请求Adapter添加数据

    一般在开发中我们都需要在listview中添加数据显示在界面上 1.首先我们会在布局中写一个listview <FrameLayout xmlns:android="http://sc ...

  6. C# Winform 跨线程更新UI控件常用方法汇总（多线程访问UI控件）

    概述 C#Winform编程中,跨线程直接更新UI控件的做法是不正确的,会时常出现“线程间操作无效: 从不是创建控件的线程访问它”的异常.处理跨线程更新Winform UI控件常用的方法有4种:1. ...

  7. React createRef：引用

    一 代码 import React, { Component } from 'react'; class Box extends Component { render() { return <b ...

  8. Python基础-python基本语法（二）

    一.注释 分类:单行注释和多行注释 1.单行注释 单行注释以#开头,在当前行内,#后面的内容就是注释内容 2.多行注释 被两个   '''    或     ''''''    包括起来的内容就是注释 ...

  9. 9.22 keep studying

    项目要换用element组件了. element [http://element.eleme.io/1.4/#/zh-CN]是饿了么前端出品的一套基于Vue2.0的组件库,今天看了一下,确实简单好看. ...

  10. 利用travis自动化构建与部署（文档项目）

    背景 保持网站上文档的最新性有比较重要的意义, travis ci 提供了免费的解决方案,本文基于 latex 构建+ aliyun oss 部署对此作了尝试. 项目链接为 https://travi ...