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>
    

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

• JS实现复选框的全选和批量删除功能
• JS实现CheckBox复选框全选、不选或全不选功能
• JS实现CheckBox复选框全选全不选功能
• js与jQuery实现checkbox复选框全选/全不选的方法
• js实现复选框的全选和取消全选效果
• js html css实现复选框全选与反选
• javaScript实现复选框全选反选事件详解
• javascript 复选框选择/全选后特效
• JS中如何实现复选框全选功能
• 基于JavaScript实现复选框的全选和取消全选

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！