杨老师课堂之JavaScript案例全选、全不选、及反选
JavaScript案例之全选、全不选、及反选
效果图:
思路:
1.先做界面
1.1制作按钮
1.2制作复选框
2..JavaScript
3.1根据不同的标签名称去获取不同的元素
3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,进行遍历得到有多少个复选框 【定义变量、循环条件、循环环境】
3.3通过循环使得每一个复选框都会处于被选中状态,即为true、反之亦然!
3.4反选:依旧采用循环去获取复选框的个数,进行判断:
判断条件是:当某一个复选框被选中后,
执行内容为: 其余复选框全部处于被选中状态下,即反选!
3.5判断:当图片到达最后一张,将图片变量重置为0,进行循环递加到原图的图片名称1上去
参考代码:
Html代码
<button>全选</button> <button>全不选</button> <button>反选</button> <br /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" /> <input type="checkbox" />
JavaScript代码
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementsByTagName('button'); var oinput = document.getElementsByTagName('input'); oBtn[0].onclick = function(){ for(var i = 0;i<oinput.length;i++){ oinput[i].checked =true; } } oBtn[1].onclick = function(){ for(var i = 0;i<oinput.length;i++){ oinput[i].checked = false; } } oBtn[2].onclick = function(){ for(var i = 0;i<oinput.length;i++){ if(oinput[i].checked == true){ oinput[i].checked = false; }else{ oinput[i].checked = true; } } } } </script>
作者: 杨校
出处: http://blog.csdn.net/kese7952
分享是快乐的,也见证了个人成长历程,文章大多都是工作经验总结以及平时学习积累,基于自身认知不足之处在所难免,也请大家指正,共同进步。
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出, 如有问题, 可邮件(397583050@qq.com)咨询。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
杨老师课堂之JavaScript案例手动切换轮播图片
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79905879 JavaScript案例之手动切换轮播图片 效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写Css 2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...) 3.JavaScript 3.1 定义一个变量 i 即原图的数字名称 3.2定义函数:将变量i进行自增。 3.3通过id获取图片元素所在位置,并在后面输出图片路径及图片名称i 的变量 3.4判断:当图片到达最后一张,将图片变量重置为0,进行循环递加到原图的图片名称1上去 参考代码: Html代码 <div "> <input type="button" value="手动切换" onclick="changeImg()" /> <img src="img/1.jpg" width="100%" id="img1"/> </div>...
- 下一篇
Java中对List去重, Stream去重
问题 当下互联网技术成熟,越来越多的趋向去中心化、分布式、流计算,使得很多以前在数据库侧做的事情放到了Java端。今天有人问道,如果数据库字段没有索引,那么应该如何根据该字段去重?大家都一致认为用Java来做,但怎么做呢? 解答 忽然想起以前写过list去重的文章,找出来一看。做法就是将list中对象的hashcode和equals方法重写,然后丢到HashSet里,然后取出来。这是最初刚学Java的时候像被字典一样背写出来的答案。就比如面试,面过号称做了3年Java的人,问Set和HashMap的区别可以背出来,问如何实现就不知道了。也就是说,初学者只背特性。但真正在项目中使用的时候你需要确保一下是不是真的这样。因为背书没用,只能相信结果。你需要知道HashSet如何帮我做到去重了。换个思路,不用HashSet可以去重吗?最简单,最直接的办法不就是每次都拿着和历史数据比较,都不相同则插入队尾。而HashSet只是加速了这个过程而已。 首先,给出我们要排序的对象User @Data @Builder @AllArgsConstructor public class User { pri...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7设置SWAP分区,小内存服务器的救世主