如何检查表格中的所有复选框并使用JS为每个复选框做一项工作

Question

我有一个表，其中包含一个 td，当单击复选框时，每行都有一个复选框，所有 td 值都转换为包含值的输入。 当同时检查所有复选框时，我想完成每个复选框的工作。

这张 GIF 将清楚地解释我的意思：

这是我的 html 代码：

    <form method="post" id="update_form">
        <table id="table" class="table table-bordered table-striped responsive-table">
            <thead>
                <tr>
                    <th><input type="checkbox" name="checkall" class="checkall"/></th>
                    <th>اسم الصنف</th>
                    <th>الكمية</th>
                    <th>السعر</th>
                    <th>القيمة</th>
                </tr>
            </thead>
            <tbody id="order_items"></tbody>
        </table>
        <input type="submit" name="multiple_update" id="multiple_update" class="btn btn-sm btn-success" value="تعديل الطلب" disabled/>
    </form>

我用于检查所有复选框的 JS 代码：

        $(document).on('click', '.checkall', function(){
            if (this.checked) {
                $(".check_box").prop("checked", true);
            } else {
                $(".check_box").prop("checked", false);
            }   
        });

以及用于获取数据的 JS 代码：

        // Fetching the order details
        function fetch_data(){
            var id = "<?php echo $id; ?>";
            $.ajax({
                url:"pages/Model/GetOrderDetails.php",
                method:"POST",
                data:{id:id},
                dataType:"json",
                success:function(data)
                {
                    var html = '';
                    for(var count = 0; count < data.length; count++)
                    {
                        html += '<tr>';
                        html += '<td><input type="checkbox" id="'+data[count].ID+'" data-name="'+data[count].item_name+'" data-quantity="'+data[count].quantity+'" data-price="'+data[count].price+'" data-total="'+data[count].total+'" class="check_box"/></td>';
                        html += '<td class="col-lg-4">'+data[count].item_name+'</td>';
                        html += '<td>'+data[count].quantity+'</td>';
                        html += '<td>'+data[count].price+'.00</td>';
                        html += '<td class="total">'+data[count].total+'.00</td>';
                        html += '</tr>';
                    }
                    html += '<td colspan="4" style="font-weight:600">الإجمالي</td>';
                    html += '<td id="gross_amount" style="font-weight:600">'+fetch_order_value();+'</td>';
                    $('#order_items').html(html);
                }
            });
        }
        fetch_data();

和 JS 用于表中每个 td 复选框的工作：

        // On check edit on order
        $(document).on('click', '.check_box', function(){
            var html = '';
            var id = $(this).attr('ID');
            var name = $(this).data('name');
            $.ajax({
                type: 'POST',
                url: 'pages/Model/GetItemName.php',
                data:{name:name},
                success: function(data){
                    $('#name'+id).html(data);
                }
            });
            
            if(this.checked)
            {
                $('#multiple_update').removeAttr('disabled');
                html = '<td><input type="checkbox" id="'+$(this).attr('ID')+'" data-name="'+$(this).data('name')+'" data-quantity="'+$(this).data('quantity')+'" data-price="'+$(this).data('price')+'" data-total="'+$(this).data('total')+'" class="check_box" checked/></td>';
                html += '<td class="col-lg-4"><select id="name'+id+'" name="name[]" class="form-control name"></select></td>';
                html += '<td><input type="number" name="quantity[]" class="form-control quantity" min="1" required value="'+$(this).data("quantity")+'"/></td>';
                html += '<td><input type="text" name="price[]" class="form-control price" value="'+$(this).data("price")+'.00"/ readonly></td></td>';
                html += '<td><input type="text" name="total[]" class="form-control total" value="'+$(this).data("total")+'.00" readonly/><input type="hidden" name="hidden_id[]" value="'+$(this).attr('id')+'" /></td>';
            }
            else
            {
                html = '<td><input type="checkbox" id="'+$(this).attr('ID')+'" data-name="'+$(this).data('name')+'" data-quantity="'+$(this).data('quantity')+'" data-price="'+$(this).data('price')+'" data-total="'+$(this).data('total')+'" class="check_box" /></td>';
                html += '<td class="col-lg-4">'+$(this).data('name')+'</td>';
                html += '<td>'+$(this).data('quantity')+'</td>';
                html += '<td>'+$(this).data('price')+'.00</td>';
                html += '<td>'+$(this).data('total')+'.00</td>';        
            }
            $(this).closest('tr').html(html);
        });

我希望你们能完美地解决我的问题我尽力解释我到底想要什么。

提前致谢。

Answer 1

选中所有/取消选中所有复选框后，您可以在复选框上触发单击事件，其行为方式与所有复选框相同

    $(document).on('click', '.checkall', function(){
        if (this.checked) {
            $(".check_box").prop("checked", true);
        } else {
            $(".check_box").prop("checked", false);
        } 
        $(".check_box").click();  
    });

Answer 2

让我们从你的第二个代码开始

$(document).on('click', '.checkall', function(){
   if (this.checked) {
        $(".check_box").prop("checked", true);
   } else {
        $(".check_box").prop("checked", false);
   }   
});

改成：

$(document).on('click', '.checkall', function(){
   $(".check_box").map((i, e) => e.click()); // <== here
});