前端简单入门第十三讲 使用JavaScript完成复选框的全选和全不选的效果
发布日期:2021-06-30 18:00:42
浏览次数:2
分类:技术文章
本文共 2420 字,大约阅读时间需要 8 分钟。
使用JavaScript完成复选框的全选和全不选的效果
真实项目开发中少不了这样的需求:在实际的开发中一条记录一条记录地进行删除的话,效率很低,而我们有的时候需要一起删除多条记录,那么就需要通过在表格之前设置一个复选框的形式进行勾选复选框,然后点击一个删除的按钮就能进行批量删除了。效果类似如下:
下面直接用一个例子来进行讲解,按如下步骤来使用JavaScript完成复选框的全选和全不选的效果:- 创建一个HTML页面;
- 确定事件:复选框的单击(onclick)事件;
- 触发一个函数;
- 在函数中,获得最上面的复选框是否被选中;
- 如果选中,则下面的所有的复选框都被选中;如果没被选中,则下面的所有的复选框都不选中。
我摘出最核心的一个HTML页面如下:
分类的ID | 分类的名称 | 分类的描述 | 操作 | |
---|---|---|---|---|
1 | 手机数码 | 手机数码 | 修改|删除 | |
2 | 电脑办公 | 电脑办公 | 修改|删除 | |
3 | 烟酒糖茶 | 烟酒糖茶 | 修改|删除 | |
4 | 鞋靴箱包 | 鞋靴箱包 | 修改|删除 | |
5 | 汽车用品 | 汽车用品 | 修改|删除 |
然后编写JavaScript代码完成复选框的全选和全不选:
function checkAll() { // 获得最上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中 var ids = document.getElementsByName("ids"); if(selectAll.checked == true) { // 最上面的复选框已被选中 // 获得下面的所有的复选框,修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = true; } } else { // 最上面的复选框没有被选中 // 获得下面的所有的复选框,修改checked属性 for(var i = 0; i < ids.length; i++) { ids[i].checked = false; } }}
其实上面的JavaScript代码可简写为:
function checkAll() { // 获得最上面的复选框 var selectAll = document.getElementById("selectAll"); var ids = document.getElementsByName("ids"); for (var i = 0; i < ids.length; i++) { ids[i].checked = selectAll.checked; }}
如要查看源码,可参考!
总结
JavaScript中的DOM对象
DOM的概述
-
什么是DOM?
DOM:Document Object Model,即文档对象模型。要认识JavaScript中的DOM,不可避免就要理解DOM树的概念,将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML文档的样子。用图可简略表示为:- html页面中写的标签可叫做element;
- html标签中写的属性可叫做attribute;
- html标签中的文本可叫做text。
以上所有的这些都可以称之为Node(节点),只不过这些节点有不同的类型,具体可分为:
- 元素节点;
- 属性节点;
- 文本节点。
HTML中常用的DOM操作
使用DOM完成对ul中添加一个li元素的操作
直接给出代码示例:
- 北京
- 上海
达到的效果为:
动态地添加文件上传输入项
明了DOM常用的操作后,我们再来完成一个案例——动态的添加文件上传输入项,以及点击删除按钮后再删除添加的文件输入项。此处直接给出代码示例:
达到的效果为:
转载地址:https://liayun.blog.csdn.net/article/details/71246523 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
做的很好,不错不错
[***.243.131.199]2024年04月15日 17时16分58秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
github.io网页无法打开(连接不是私密连接)
2019-04-30
git submodule
2019-04-30
linux中source、sh、bash、./有什么区别
2019-04-30
vscode git
2019-04-30
基于MATLAB的二进制数字调制与解调信号的仿真——2FSK
2019-04-30
基于MATLAB的二进制数字调制与解调信号的仿真——2PSK
2019-04-30
基于MATLAB的模拟调制信号与解调的仿真——AM
2019-04-30
基于MATLAB的模拟调制信号与解调的仿真——DSB
2019-04-30
基于MATLAB的模拟调制信号与解调的仿真——SSB
2019-04-30
pyc文件
2019-04-30
操作系统实验之生产者和消费者程序
2019-04-30
操作系统实验之猴子过桥问题的模拟程序
2019-04-30
POJ - 3067 Japan (树状数组 思维)
2019-04-30
POJ - 2352 Stars (树状数组 入门题)
2019-04-30
HDU - 1166 敌兵布阵 (树状数组模板题/线段树模板题)
2019-04-30
CodeForces - 761C Dasha and Password (思维 暴力)
2019-04-30
POJ - 2481 Cows (树状数组 入门题)
2019-04-30
ACM-ICPC 2018 焦作赛区网络预赛 I. Save the Room
2019-04-30