Tengo una tabla que contiene un td que tiene una casilla de verificación para cada fila al hacer clic en la casilla de verificación, todos los valores td se convierten en entradas que contienen valores. Quiero hacer el trabajo de cada casilla de verificación cuando marque todas las casillas de verificación al mismo tiempo.

Este GIF explicará lo que quiero decir claramente:

Y este es mi código 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>

Mi código JS para marcar todas las casillas de verificación:

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

Y el código JS para obtener los datos:

 // 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();

Y JS para el trabajo de cada casilla de verificación td en la tabla:

 // 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); });

Espero que hayan entendido mi problema a la perfección. Hice todo lo posible para explicar lo que quiero exactamente.

Gracias por adelantado.