JavaScript实现复选框全选功能-偶像资源网

本文实例为大家分享了JavaScript实现复选框全选的具体代码，供大家参考，具体内容如下

代码：

<!DOCTYPE html>
<html lang=\"en\">

<head>
    <meta charset=\"UTF-8\">
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <title>Document</title>
    <style>
        table {
            width: 300px;
            border-spacing: 0;
            /* text-align: center; */
            margin: 100px auto;
            border-collapse: collapse;
        }
        
        table tr:nth-child(n+2)>td {
            text-align: left;
            background-color: rgb(250, 245, 245);
            color: dimgray;
            font-size: 14px;
        }
        
        table tr:nth-child(1) {
            background-color: skyblue;
            color: white;
        }
        
        th,
        td {
            padding: 10px;
            border: 0.5px solid gray;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><input type=\"checkbox\" name=\"\" id=\"all\"></th>
            <th>商品</th>
            <th>价格</th>
        </tr>
        <tr>
            <td><input type=\"checkbox\" name=\"\" id=\"ip8\"></td>
            <td>iPhone8</td>
            <td>8000</td>
        </tr>
        <tr>
            <td><input type=\"checkbox\" name=\"\" id=\"pro\"></td>
            <td>iPad Pro</td>
            <td>5000</td>
        </tr>
        <tr>
            <td><input type=\"checkbox\" name=\"\" id=\"air\"></td>
            <td>iPad Air</td>
            <td>2000</td>
        </tr>
        <tr>
            <td><input type=\"checkbox\" name=\"\" id=\"watch\"></td>
            <td>Apple Watch</td>
            <td>2000</td>
        </tr>
    </table>

    <script>
        var all = document.getElementById(\'all\');
        var items = document.querySelectorAll(\'tr>td>input\');
        all.onclick = function() {
            for (var i = 0; i < items.length; i++) {
                items[i].checked = this.checked;
            }
        }


        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function() {
                var flag_all = 1;
                for (var j = 0; j < items.length; j++) {
                    if (items[j].checked == 0) {
                        flag_all = 0;
                        all.checked = flag_all;
                        break;
                    }
                }
                all.checked = flag_all;
            }
        }
    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JavaScript实现复选框全选功能

请登录后发表评论