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

  • 相关阅读:
    hdu1316
    MVC中的ViewData、ViewBag和TempData
    linux下性能监控工具
    【翻译自mos文章】执行utlpwdmg.sql之后报ORA-28003, ORA-20001, ORA-20002, ORA-20003, ORA-20004 错误
    HTTP协议的消息头:Content-Type和Accept的作用 转载https://www.cnblogs.com/lexiaofei/p/7289436.html
    HTTP协议的消息头:Content-Type和Accept的作用
    JWT(JSON Web Token) 多网站的单点登录,放弃session 转载https://www.cnblogs.com/lexiaofei/p/7409846.html
    Http协议中get和post的区别
    常用的HTTP请求头与响应头
    浏览器获取自定义响应头response-headers
  • 原文地址:https://www.cnblogs.com/5201314m/p/9848639.html
Copyright © 2011-2022 走看看