zoukankan      html  css  js  c++  java
  • html 全选或全不选小案例

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>lf</title>
            <script type="text/javascript">
                function selectAllOrNo(){
                    
                    var choice = document.getElementById("choose");
                    //根据对应的状态全选或全不选
                    if(choice.checked==true){
                        selectAll();
                    }else{
                        noSelect();
                    }
                }
                
                function selectAll(){
                    var choice = document.getElementById("choose");
                    choice.checked=true;
                    
                    //获取interest的复选框
                    var interests = document.getElementsByName("interest");
                    // 遍历
                    for(var i = 0; i<interests.length;i++){
                        var interest = interests[i];
                        interest.checked = true;
                    }
                }
                
                function noSelect(){
                    var choice = document.getElementById("choose");
                    choice.checked=false;
                    //获取interest的复选框
                    var interests = document.getElementsByName("interest");
                    // 遍历
                    for(var i = 0; i<interests.length;i++){
                        var interest = interests[i];
                        interest.checked = false;
                    }
                }
                
                function selectOther(){
                    var choice = document.getElementById("choose");
                    choice.checked=true;
                    //获取interest的复选框
                    var interests = document.getElementsByName("interest");
                    // 遍历
                    for(var i = 0; i<interests.length;i++){
                        var interest = interests[i];
                        interest.checked = !interest.checked;
                        // 如果存在未选择,则设置全选/全不选为不选择状态
                        checkSelect();
                    }
                    
                }
                // 如果存在未选择,则设置全选/全不选为不选择状态
                function checkSelect(){
                    
                    var choice = document.getElementById("choose");
                    choice.checked=true;
                    //获取interest的复选框
                    var interests = document.getElementsByName("interest");
                    // 遍历
                    for(var i = 0; i<interests.length;i++){
                        var interest = interests[i];
                        // 如果存在未选择,则设置全选/全不选为不选择状态
                        if(interest.checked==false){
                            choice.checked=false;
                        }
                    }
                }
        </script>
        </head>
        <body>
              你爱好的运动是?
            <input type="checkbox" id="choose" onclick="selectAllOrNo()"/>全选/全不选<br>
            
            <input type="checkbox" name="interest" value="足球" onchange="checkSelect()"/>足球
            <input type="checkbox" name="interest" value="篮球"  onchange="checkSelect()"/>篮球
            <input type="checkbox" name="interest" value="羽毛球"  onchange="checkSelect()"/>羽毛球
            <input type="checkbox" name="interest" value="乒乓球"  onchange="checkSelect()"/>乒乓球
            <br>
             <input type="button" value="全选" onclick="selectAll();"/>
             <input type="button" value="全不选" onclick="noSelect();"/>
             <input type="button" value="反选" onclick="selectOther();"/>
        </body>
    </html>
  • 相关阅读:
    springMVC 使用WebApplicationContext获取ApplicationContext对象
    idea for mac 最全快捷键整理
    装饰模式 应用场景和实现
    RabbitMQ基础知识详解
    jetty 介绍以及小例子
    业务对象的贫血模型与充血模型
    同构与异构
    Java设计模式之策略模式与状态模式
    C++之内部类(嵌套类)与外部类及友元
    深入理解Java中为什么内部类可以访问外部类的成员
  • 原文地址:https://www.cnblogs.com/lantu1989/p/6146368.html
Copyright © 2011-2022 走看看