首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >杨老师课堂之JavaScript案例全选、全不选、及反选

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

作者头像
杨校
发布2018-12-06 10:31:02
9190
发布2018-12-06 10:31:02
举报
文章被收录于专栏:Java技术分享圈Java技术分享圈
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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年04月12日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档