JS应用实例5：全选、动态添加
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：全选、动态添加的更多相关文章
- JS中表格的全选和删除要注意的问题
在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. ...
- Android高级控件（一）——ListView绑定CheckBox实现全选，添加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...
- JS实现表单全选以及取消全选实例
实现效果: 全选按钮:点击全选按钮所有的小按钮都会被选中:点掉全选按钮,所有按钮取消选中: 小按钮:只有全部被选中,全选按钮才会被选中 思路分析: 1.全选和取消全选做法:让下面所有复选框的 chec ...
- echarts图标legend全选功能添加
平时做图表的时候经常用echarts,确实是一款很好用的插件. 开发中遇到了一个问题,在展示的曲线,也就是legend很多的时候,不太好只展示其中几条.配置中是可以默认设置初始化是否展示,但不适用于全 ...
- vue.js 批量删除跟全选，反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- js实现checkbox的全选和全不选功能
html代码: <form name="form1" method="post" action="manage.php?act=sub" ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- js遍历对象的属性并且动态添加属性
var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...
- asp.net中Repeater结合js实现checkbox的全选/全不选
前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value= ...
随机推荐
- 使用Powershell实现计算机名称及IP地址修改
我的第一篇博客分享,写这个代码的用途是在公司Ghost完系统之后去修改本地计算机名称及IP 地址,用Powershell实现. 1. 代码第一部分,检查Powershell是否已管理员权限执行,如果不 ...
- typedef typename
所以根据上述两条分析, typedef typename RefBase::weakref_type weakref_type; 语句的真是面目是: typedef创建了存在类型的别名,而typen ...
- keil mdk5安装
- python 处理时间 datetime 三板斧
import datetime1)#str -> datetime对象,(datetime对象之间可加减,date[0]为str) datetime.datetime.strptime(date ...
- mysql 查看字段是否添加了索引
show index from 数据库名.表名: 如果是在Navicat这些客户端可以不用写数据库名.
- php生成红包
<?php /** * 随机生成红包金额 * @param $n 红包个数 * @param $sum 总金额 整数 * @param $index_max 最大金额在数组中索引 * @para ...
- CentOS7配置samba服务
Step1:安装samba相关软件 [root@node-1 ~]# yum -y install samba samba-client Step2:创建共享目录 [root@node-1 ~]# m ...
- [leetcode]35. Search Insert Position寻找插入位置
Given a sorted array and a target value, return the index if the target is found. If not, return the ...
- IIS上配置单页面404
问题 因为我们的应用是单页客户端应用,当用户在浏览器直接访问http://www.xxx.com/user时,刷新页面的时候,会返回404错误. 问题原因 服务端URL匹配不到相应的路由资源 解决方案 ...
- vba统计电脑计算机名和登陆的用户名
Public Sub GetIPT() gipt = Trim(InputBox("请输入所在组,只需输入前面的字母代码即可 A- groupA B-groupB C-groupC D-gr ...