[英]jQuery / JavaScript: Check all checkboxes and Check each checkbox to display div
[英]How to check all checkboxes in a table and do a job for each checkbox with JS
我有一個表,其中包含一個 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);
});
我希望你們能完美地解決我的問題我盡力解釋我到底想要什么。
提前致謝。
選中所有/取消選中所有復選框后,您可以在復選框上觸發單擊事件,其行為方式與所有復選框相同
$(document).on('click', '.checkall', function(){
if (this.checked) {
$(".check_box").prop("checked", true);
} else {
$(".check_box").prop("checked", false);
}
$(".check_box").click();
});
讓我們從你的第二個代碼開始
$(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
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.