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.反选按钮

  • 相关阅读:
    Linux 安装网络yum地址
    MYSQL登录错误:mysqladmin: connect to server at ‘localhost’ failed
    linux 中截取字符串
    screen 调到后台使用
    Yum 安装memcached 与缓存清空
    LAMP 环境搭建
    DELL--R420 CPU报警“CPU0000 cpu2 internal error (IERR)contact support”
    解决vim粘贴时格式混乱的问题
    DELL 管理软件安装
    windows 使用SVN命令
  • 原文地址:https://www.cnblogs.com/yangchuanqi/p/7601943.html
Copyright © 2011-2022 走看看