原生js实现全选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
</head>
<body>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生JS 实现简单的全选反选</title>

    <style>
        * {
            padding:0;
            margin:0;
        }
        .wrap {
            width:300px;
            margin:20px auto 0;
        }
        table {
            border-collapse:collapse;
            border-spacing:0;
            border:1px solid #c0c0c0;

        }
        th,td {
            border:1px solid #d0d0d0;
            color:#404060;
            padding:10px;
        }
        th {
            background-color:#09c;
            font:bold 16px "微软雅黑";
            color:#fff;
        }
        td {
            font:14px "微软雅黑";
        }
        tbody tr {
            background-color:#f0f0f0;
        }
        tbody tr:hover {
            cursor:pointer;
            background-color:#fafafa;
        }
    </style>
</head>
<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>

        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>

        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>

        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>

        </tr>

        </tbody>
    </table>
</div>

<script>

    var all = document.getElementById("j_cbAll");
    var tbody = document.getElementById("j_tb");
    var checkboxs = tbody.getElementsByTagName("input");

    all.onclick = function() {
        for (var i = 0; i < checkboxs.length; i++) {
            var checkbox = checkboxs[i];
            checkbox.checked = this.checked;
        }
    };

    for (var i = 0; i < checkboxs.length; i++) {
        checkboxs[i].onclick = function() {
            var isCheckedAll = true;
            for (var i = 0; i < checkboxs.length; i++) {
                if (!checkboxs[i].checked) {
                    isCheckedAll = false;
                    break;
                }
            }
            all.checked = isCheckedAll;
        };
    }
</script>
</body>
</html>
</body>
</html>
原生js实现全选反选

猜你喜欢
