您现在的位置是:首页 > 文章详情

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

日期:2018-04-11点击:317
版权声明:本文为博主原创文章,未经博主允许不得转载。 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)咨询。


原文链接:https://yq.aliyun.com/articles/675159
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章