如何检查表格中的所有复选框并使用JS为每个复选框做一项工作
Posted
技术标签:
【中文标题】如何检查表格中的所有复选框并使用JS为每个复选框做一项工作【英文标题】:How to check all checkboxes in a table and do a job for each checkbox with JS 【发布时间】:2022-01-04 04:15:37 【问题描述】:我有一个表,其中包含一个 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();
表中每个 td 复选框的工作和 JS:
// 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);
);
我希望你们能完美地解决我的问题我已尽力解释我到底想要什么。
提前致谢。
【问题讨论】:
这能回答你的问题吗? jQuery checkbox checked state changed event 【参考方案1】:让我们从您的第二个代码开始
$(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
);
但是请您知道如何点击所有复选框,即使它们被禁用? 所以我认为你应该将处理 onclick 事件的代码移到一个新函数中
// OLD
$(document.on('click', '.check_box', function()
var html = '';
var id = $(this).attr('ID');
....
// NEW
const onclickCB = function()
var html = '';
var id = $(this).attr('ID');
....
$(document.on('click', '.check_box', onclickCB);
$(document).on('click', '.checkall', function()
$(".check_box").map((i,e) =>
e.checked = !e.checked;
(onclickCB.bind(e))()
)
);
【讨论】:
答案之前的解决方案相同,但语法不同。它的工作,但当检查什么都没有发生,当取消选中它的工作正常 因此,如果我们将您编辑的代码放入 if 中,否则它将完美运行。谢谢兄弟,我真的很感激。 如果复选框被禁用时.trigger('click')
有什么解决方案?!
我犯了一个小错误并编辑了我的答案,请您检查一下吗?
我已经重新编辑了答案,希望对你有帮助【参考方案2】:
选中所有/取消选中所有复选框后,您可以在复选框上触发点击事件,其行为方式与所有复选框相同
$(document).on('click', '.checkall', function()
if (this.checked)
$(".check_box").prop("checked", true);
else
$(".check_box").prop("checked", false);
$(".check_box").click();
);
【讨论】:
是的,它可以工作,但是当检查没有任何反应时,当取消选中它的工作正常以上是关于如何检查表格中的所有复选框并使用JS为每个复选框做一项工作的主要内容,如果未能解决你的问题,请参考以下文章