zoukankan      html  css  js  c++  java
  • DOM例题

        <body>
            <table>
                <tr>
                    <td>
    
                        <input type="checkbox" id="check_all" />
                        <label for="check_all">全选</label>
                        <input type="checkbox" id="reverse" />
                        <label for="reverse">反选</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" class="items" />
                    </td>
                </tr>
            </table>
        </body>
    
    </html>
    <script>
        var check = document.getElementById("check_all");
        var reverse = document.getElementById("reverse");
    
        var items = document.getElementsByClassName("items");
    
        check.onchange = function() {
            if(check.checked) {
                for(var x in items) {
                    items[x].checked = true;
                }
            } else {
                for(var x in items) {
                    items[x].checked = false;
                }
            }
        }
        for(var z in items) {
            items[z].onchange = function() {
                if(!this.checked) {
                    check.checked = false;
                }else{
                    var status = 0;
                    for(var y in items){
                        if(items[y].checked == false){
                            status = 1;
                            alert(y);
                        }
                    }
                    if(status == 0){
                        check.checked = true;
                    }
                }
            }
        }
        
        reverse.onclick = function(){
            for(var x in items){
                items[x].checked = items[x].checked?false:true;
            }
        }
    </script>

    全选框
    1.点全选 全部选择
    2.取消全选 全部取消选择
    3.全选时 取消单个选项 全选框取消选择
    4.未全选时 所有单个选项选择 全选框选择
    5.反选按钮

  • 相关阅读:
    JS中!=、==、!==、===的用法和区别
    Jquery判断Checkbox是否选中三种方法
    C# 信号量 学习
    redis学习资料
    Redis常用命令
    MySQL、HBase、ES的对比
    我对依赖注入,控制反转的理解
    net输出错误日志
    XmlExtensions帮助类
    DatetimeHelper类的编写
  • 原文地址:https://www.cnblogs.com/yangchuanqi/p/7601943.html
Copyright © 2011-2022 走看看