杨老师课堂之JavaScript案例全选、全不选、及反选

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084     JavaScript案例之全选、全不选、及反选效果图:思路:    1.
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kese7952/article/details/79906084
    

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)咨询。


目录
相关文章
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
9月前
|
JavaScript 前端开发 索引
40个JS常用使用技巧案例
大家好,我是V哥。在日常开发中,JS是解决页面交互的利器。V哥总结了40个实用的JS小技巧,涵盖数组操作、对象处理、函数使用等,并附带案例代码和解释。从数组去重到异步函数,这些技巧能显著提升开发效率。先赞再看后评论,腰缠万贯财进门。关注威哥爱编程,全栈开发就你行!
286 16
|
8月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
8月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
JavaScript 前端开发 UED
Javaweb之javascript的小案例的详细解析
通过上述步骤,我们得到了一个动态更新的实时时钟,这个简单的JavaScript案例展示了定时器的使用方法,并讲解了如何处理日期和时间。这个案例说明了JavaScript在网页中添加动态内容与交互的能力。对于涉足JavaWeb开发的学习者来说,理解和运用这些基础知识非常重要。
134 11
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
187 0
|
前端开发 JavaScript 开发者
fuse.js前端搜索简单使用的三个案例
通过这三个例子可以看出,Fuse.js 是一个功能丰富、易于实现的前端搜索库。它使开发者能够便捷地实现从基础到高级的搜索功能,无论是简单的列表搜索还是实时的搜索建议,都能够高效、精确地提供给用户所需的信息。
637 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
284 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
215 1
JavaScript中的原型 保姆级文章一文搞懂
|
12月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
140 0
下一篇
oss云网关配置