当前位置: 移动技术网 > IT编程>开发语言>JavaScript > JavaScript学习案例之全选、全不选、及反选

JavaScript学习案例之全选、全不选、及反选

2018年11月09日  | 移动技术网IT编程  | 我要评论

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>  

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网