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>
  • 相关阅读:
    并发编程学习笔记(二十九、Unsafe)
    并发编程学习笔记(二十八、ConcurrentHashMap,Java8 ConcurrentHashMap)
    并发编程学习笔记(二十七、ConcurrentHashMap,Java7 ConcurrentHashMap)
    并发编程学习笔记(二十六、ConcurrentHashMap,Java8 HashMap简述)
    位运算符
    并发编程学习笔记(二十五、ConcurrentHashMap,Java7 HashMap简述)
    并发编程学习笔记(二十四、AQS总结)
    并发编程学习笔记(二十三、CopyOnWriteArrayList源码分析)
    我二十多岁了,至今依然一事无成
    从零开始手写 mybatis(一)MVP 版本
  • 原文地址:https://www.cnblogs.com/lantu1989/p/6146368.html
Copyright © 2011-2022 走看看