zoukankan      html  css  js  c++  java
  • js实现表格行全选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> </title>
    </head>
    
    <body>
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cball"/>
                    </th>
                    <th>product</th>
                    <th>price</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>iphone</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>huawei</td>
                    <td>9000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox"/>
                    </td>
                    <td>sony</td>
                    <td>3000</td>
                </tr>
            </tbody>
        </table>
        <style>
            .bg{
                background-color: blueviolet;
            }
        </style>
       <script>
            var j_cbAll = document.getElementById('j_cball');
            var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
            j_cbAll.onclick = function(){
                for(var i = 0; i < j_tbs.length; i++){
                    j_tbs[i].checked = this.checked;
                }
            }
            var flg = true;
            for(var i = 0; i < j_tbs.length; i++){
                j_tbs[i].onclick = function(){
    
                    for(var i = 0; i < j_tbs.length; i++){
                        if(j_tbs[i].checked){
                            flg = false;
                            break;
                        }
                    }
                    j_cbAll.checked = flg;
                }
            }
    </script>
    </body>
    </html>
  • 相关阅读:
    立体图
    旅行家的预算
    洛谷P多米诺骨牌
    洛谷P2331最大子矩阵
    理想的正方形
    2015 ACM/ICPC Asia Regional Hefei Online Find a path
    Atcoder abc 138 F
    Atcoder abc 138 E String of Impurity
    zlb的8.19考试
    Atcoder abc 138
  • 原文地址:https://www.cnblogs.com/yanweichen/p/14614185.html
Copyright © 2011-2022 走看看