脚本宝典收集整理的这篇文章主要介绍了js实例教程-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>
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>
觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的js实例教程-JavaScript学习案例之全选、全不选、及反选全部内容,希望文章能够帮你解决js实例教程-JavaScript学习案例之全选、全不选、及反选所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。