我有一個表格，其中包含一個 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') '" checked/></td>';
html = '<td ><select id="name' id '" name="name[]" ></select></td>';
html = '<td><input type="number" name="quantity[]" min="1" required value="' $(this).data("quantity") '"/></td>';
html = '<td><input type="text" name="price[]" value="' $(this).data("price") '.00"/ readonly></td></td>';
html = '<td><input type="text" name="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') '" /></td>';
html = '<td >' $(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);
});
我希望你們能完美解決我的問題，我盡力解釋我到底想要什么。
提前致謝。
uj5u.com熱心網友回復：
讓我們從你的第二個代碼開始
$(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))()
})
});
uj5u.com熱心網友回復：
選中所有/取消選中所有復選框后，您可以在復選框上觸發單擊事件，該事件的行為方式與所有復選框相同
$(document).on('click', '.checkall', function(){
if (this.checked) {
$(".check_box").prop("checked", true);
} else {
$(".check_box").prop("checked", false);
}
$(".check_box").click();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/366217.html
標籤：javascript html 查询 阿贾克斯