zoukankan      html  css  js  c++  java
  • javascript实现全选,全不选,反选

    利用input的checked属性来实现:checked值为true,表示被选择,否则反之。

    效果:

    js代码:

        <script>
                var butt1 = document.getElementById("butt1");
                var butt2 = document.getElementById("butt2");
                var butt3 = document.getElementById("butt3");
                var pInput = document.getElementById("pInput");
                var opInput = pInput.getElementsByTagName("input");
                butt1.onclick = function(){
                    for(var i = 0;i<opInput.length;i++){
                        opInput[i].checked = true;
                    }
                }
                butt2.onclick = function(){
                    for(var i = 0;i< opInput.length;i++){
                        opInput[i].checked = false;                
                    }
                }
                butt3.onclick = function(){
                    for(var i = 0;i< opInput.length;i++){
                        if(opInput[i].checked == false){
                            opInput[i].checked = true;
                        }
                        else{
                            opInput[i].checked = false;
                        }    
                    }        
                }
        </script>

    1.通过var butt1 = document.getElementById("butt1")来获取对应的id元素。

    2.butt1.onclick = function(){  }添加点击事件

    3.通过对应元素的.getElementsByTagName(" ")获取该元素下的所有子元素,即数组。(不要忘记那个s)

    凡是通过.getElementsByTagName(" ")来获取标签元素的,最后都为数组,可以用索引[i]获取。

    4.尽量不使用document.getElementByClassName来获取class元素,我从网上看似乎是说兼容性不太好,有时候浏览器识别不出来。

    5.input是checkbox类型时才可进行多选,即全选。radio类型时只能是单选。

    完整代码:

    <html>
    <head>
        <meta charset="utf-8" />
        <title>1</title>
        
        
    </head>
    
    <body>
        <div class="Form">
            <form>
                <input type="button" value="全选" id="butt1"></input>
                <input type="button" value="全不选" id="butt2"></input>
                <input type="button" value="反选" id="butt3"></input><br/>
    
            <p id="pInput">
                <input type="checkbox" value="苹果">苹果</input><br/>
                <input type="checkbox" value="香蕉">香蕉</input><br/>
                <input type="checkbox" value="橘子">橘子</input>
            </p>
                
            </form>
        </div>
    </body>
    
    <script>
    
                var butt1 = document.getElementById("butt1");
                var butt2 = document.getElementById("butt2");
                var butt3 = document.getElementById("butt3");
                var pInput = document.getElementById("pInput");
                var opInput = pInput.getElementsByTagName("input");
                
                butt1.onclick = function(){
                    for(var i = 0;i<opInput.length;i++){
                        opInput[i].checked = true;
                    }
                }
    
                butt2.onclick = function(){
                    for(var i = 0;i< opInput.length;i++){
                        opInput[i].checked = false;                
                    }
                }
                
                butt3.onclick = function(){
                    for(var i = 0;i< opInput.length;i++){
                        if(opInput[i].checked == false){
                            opInput[i].checked = true;
                        }
                        else{
                            opInput[i].checked = false;
                        }    
                    }        
                }
                
            
        </script>
    
    </html>
    View Code

    参考博客:https://www.cnblogs.com/tynam/p/9833759.html

  • 相关阅读:
    .net 加伪静态的方法
    前台调用后台事件的方法
    关于一个网站的源码问题
    div里面有ul li时 让高度自适应的方法
    用insert语句写入汉字变成问号的解决
    .net 4.0 ValidateRequest="false" 无效
    修复 VS2008 asp.net 设计视图 失效/工具选项[Html设计视图]出现"加载此属性页时出错" 方案
    绑定数据时,时间格式的转换
    IE下CSS属性float:right下移换行或不显示的问题原因及解决
    珍惜生命,远离培训 《如何选择好的培训机构》读后感 JavaEye技术网站
  • 原文地址:https://www.cnblogs.com/5201314m/p/9848639.html
Copyright © 2011-2022 走看看