HTML代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>全选和全不选</title>
  7.         <script>
  8.             function checkAll() {
  9.                 //1.获取编号前面的复选框
  10.                 var checkAllEle = document.getElementById("checkAll");
  11.                 //2.对编号前面复选框的状态进行判断
  12.                 if(checkAllEle.checked == true) {
  13.                     //3.获取下面所有的复选框
  14.                     var checkOnes = document.getElementsByName("checkOne");
  15.                     //4.对获取的所有复选框进行遍历
  16.                     for(var i = 0; i < checkOnes.length; i++) {
  17.                         //5.拿到每一个复选框，并将其状态置为选中
  18.                         checkOnes[i].checked = true;
  19.                     }
  20.                 } else {
  21.                     //6.获取下面所有的复选框
  22.                     var checkOnes = document.getElementsByName("checkOne");
  23.                     //7.对获取的所有复选框进行遍历
  24.                     for(var i = 0; i < checkOnes.length; i++) {
  25.                         //8.拿到每一个复选框，并将其状态置为未选中
  26.                         checkOnes[i].checked = false;
  27.                     }
  28.                 }
  29.             }
  30.         </script>
  31.  
  32.     </head>
  33.  
  34.     <body>
  35.         <table border="1" width="500" height="50" align="center">
  36.             <thead>
  37.                 <tr>
  38.                     <th><input type="checkbox" onclick="checkAll()" id="checkAll" /></th>
  39.                     <th>编号</th>
  40.                     <th>姓名</th>
  41.                     <th>年龄</th>
  42.                 </tr>
  43.             </thead>
  44.             <tbody>
  45.                 <tr>
  46.                     <td><input type="checkbox" name="checkOne" /></td>
  47.                     <td>1</td>
  48.                     <td>张三</td>
  49.                     <td>22</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td><input type="checkbox" name="checkOne" /></td>
  53.                     <td>2</td>
  54.                     <td>李四</td>
  55.                     <td>25</td>
  56.                 </tr>
  57.                 <tr>
  58.                     <td><input type="checkbox" name="checkOne" /></td>
  59.                     <td>3</td>
  60.                     <td>王五</td>
  61.                     <td>27</td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td><input type="checkbox" name="checkOne" /></td>
  65.                     <td>4</td>
  66.                     <td>赵六</td>
  67.                     <td>29</td>
  68.                 </tr>
  69.                 <tr>
  70.                     <td><input type="checkbox" name="checkOne" /></td>
  71.                     <td>5</td>
  72.                     <td>田七</td>
  73.                     <td>30</td>
  74.                 </tr>
  75.                 <tr>
  76.                     <td><input type="checkbox" name="checkOne" /></td>
  77.                     <td>6</td>
  78.                     <td>汾九</td>
  79.                     <td>20</td>
  80.                 </tr>
  81.             </tbody>
  82.         </table>
  83.     </body>
  84.  
  85. </html>

效果：

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

DOM的简单应用：

动态添加：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>动态添加城市</title>
  7.         <script>
  8.             window.onload = function() {
  9.                 document.getElementById("btn").onclick = function() {
  10.                     //1.获取ul元素节点
  11.                     var ulEle = document.getElementById("ul1");
  12.                     //2.创建城市文本节点
  13.                     var textNode = document.createTextNode("深圳"); //深圳
  14.                     //3.创建li元素节点
  15.                     var liEle = document.createElement("li"); //<li></li>
  16.                     //4.将城市文本节点添加到li元素节点中去
  17.                     liEle.appendChild(textNode); //<li>深圳</li>
  18.                     //5.将li添加到ul中去
  19.                     ulEle.appendChild(liEle);
  20.                 }
  21.             }
  22.         </script>
  23.     </head>
  24.  
  25.     <body>
  26.         <input type="button" value="添加新城市" id="btn" />
  27.         <ul id="ul1">
  28.             <li>北京</li>
  29.             <li>上海</li>
  30.             <li>广州</li>
  31.         </ul>
  32.     </body>
  33.  
  34. </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. ubuntu16下用QT5实现对话框应用

    ubuntu16下用QT5,实现对话框程序,步骤:生成界面Dialog.ui,将它应用到主程序,通过主程序显示. 一 界面练习 1 Dialog.ui界面生成 在命令行输入:designer 进入界面 ...

  2. 高并发高负载系统架构-php篇

    首先呢,我罗列一下文章的目录,让大家有个整体轮廓的了解! 1.为什么要进行高并发和高负载的研究 2.高并发和高负载的约束条件 3.解决之道——硬件篇 4.解决之道——部署篇 5.解决之道——环境篇 6 ...

  3. href，src，url三者区别。

    在html中: href(Hypertext Reference)指向网络上的资源,在现有元素(如a标签)或现有文档(如link)与目标锚或资源之间建立链接. 建立链接的过程中,浏览器不会停止解析所在 ...

  4. HDU2665 求区间第K大 主席树

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2665 代码: //#include<bits/stdc++.h> #include< ...

  5. IP路由配置之---------dhcp服务器配置

    实验设备:一台华三路由器,一台PC 步骤一,在系统视图下打开dhcp功能,禁用IP(网关,域名服务器) [H3C]dhcp enable # [H3C]dhcp server forbidden-ip ...

  6. as3:sprite作为容器使用时，最好不要指定width,height

    除 TextField 和 Video 对象以外,没有内容的显示对象(如一个空的 Sprite)的高度为 0,即使您尝试将 height 设置为其它值,也是这样. 如果您设置了 height 属性,则 ...

  7. nlp算法工程师养成记 目标要求

    时间规定: 2018.12.07-2018.02.15 能力养成: linux, shell python, c++(会多少算多少) tensorflow, keras, pytorch(tf优先) ...

  8. linux 查找java程序、杀死、重启

    查看java进程 ps -ef|grep java杀死进程 kill -9 4834 (进程号)启动 java -jar xxx.jar & (后台会一直运行)

  9. linux查询公网ip

    查询公网ip[出口IP] 1.curl icanhazip.com 2.curl ipecho.net/plain 3.curl www.trackip.net/i

  10. node.js中path路径模块的使用

    path模块是node.js中处理路径的核心模块.可以很方便的处理关于文件路径的问题. join() 将多个参数值合并成一个路径 const path = require('path'); conso ...