【发布时间】：2021-07-22 12:22:40
【问题描述】：
我创建了一个购物车页面。每个购物车项目都有自己的复选框。我使用<input type="checkbox"> 的常规复选框。在我使用 iCheck 插件之前一切正常。
我想不出更好的问题标题构成，因为这是一个奇怪的情况。
基本上，我想要发生的是，每次我勾选一个复选框时，grand_total 都会反映。当我勾选复选框时它工作正常，直到我单独检查所有。 grand_total 反映正确。但是，如果我第一次勾选select all 复选框，它将计算所有cart_items，不包括购物车中的最后一项。当我最后一次单击select_all 时，它反映正确。我无法弄清楚是什么原因造成的，因为当我使用常规复选框时它工作正常。也许我错过了什么。
这里是发生的事情的快速演示： Quick Demo Video
在第一次单击select_all 时，似乎只有 2 个勾选的复选框，即使选中了 3 个。
所以似乎每次第一次单击全选时都会发生这种情况。然后之后工作正常。如果我重新加载页面，问题又来了。
这是我的 HTML 代码
<section class="cart_area">
<div class="table-responsive">
<table>
<thead>
<tr>
<th class="text-center">
<input type="checkbox" name="" id="" class="i-checks select_all">
</th>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Total</th>
</tr>
</thead>
<tbody>
<input type="hidden" name="cart_items" class="cart_items">
<?php
$cart_items = $cakeOrdering->get_data("SELECT * FROM vw_cart_items WHERE cartID = ? ORDER BY cart_itemID DESC", array($_SESSION['cartID']));
if(!empty($cart_items)){
if(is_array($cart_items) || is_object($cart_items)){
foreach($cart_items as $cart_item){
?>
<tr data-id="<?php echo $cart_item['cart_itemID'] ?>">
<td class="text-center">
<input type="checkbox" name="" id="" class="i-checks cart_item_checkbox">
</td>
<td class="product">
<img src="../img/cake_uploads/<?php echo $cart_item['image']; ?>" alt="" class="product-img">
<div class="prod-info">
<p class="prod-name"><?php echo $cart_item['prod_name'] ?></p>
<p class="prod-price" data-price="<?php echo $cart_item['price']; ?>">₱ <?php echo number_format($cart_item['price'], 2, ".", ","); ?></p>
<a href="#" class="action text-info mr-2">Edit</a>
<a href="#" class="action text-danger">Delete</a>
</div>
</td>
<td class="quantity">
<div class="quantity-box">
<button class="minus-qty">-</button>
<input type="number" placeholder="1" value="<?php echo $cart_item['qty']; ?>" class="qty" disabled>
<button class="add-qty">+</button>
</div>
</td>
<td class="total text-right" data-total="<?php echo $cart_item['total_price']; ?>">₱ <?php echo number_format($cart_item['total_price'], 2, ".", ","); ?></td>
</tr>
<?php }}}else{ ?>
<tr>
<td colspan="4" class="text-center">There are no products in you cart. Shop now.</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="row mt-4">
<div class="col-lg-7"></div>
<div class="col-lg-5">
<div class="cart-total-text">
<div class="cart-head">Cart Total</div>
<div class="total-boxes">
<p>Sub Total <span class="sub-total">₱ 0.00</span></p>
</div>
<div class="total-boxes">
<p>Total <span class="grand-total">₱ 0.00</span></p>
<input type="hidden" name="grand-total" class="grand-total">
</div>
<div class="cart-footer text-right">
<button class="btn pest_btn" id="checkout">Proceed to Checkout</button>
</div>
</div>
</div>
</div>
</section>
这是我的带有常规复选框的旧代码：（这个适用于常规复选框）
function sum() {
var overall_total = 0;
$(".cart_checkbox:checked").closest("tr").find('.total_price').each(function() {
total_price = $(this).data('total_price');
overall_total = overall_total + parseFloat(total_price);
})
$('.overall_total').text(formatToCurrency(overall_total));
return overall_total;
}
// Select All
$('.select_all').on('change', function() {
$('.cart_checkbox').not(this).prop('checked', this.checked);
sum();
});
// Individual Checkboxes
$(".cart_checkbox").change(function() {
var total_length = $(".cart_checkbox").length;
var checked_length = $(".cart_checkbox:checked").length
//check if length less then total
if (checked_length < total_length) {
$('.select_all').prop('checked', false); //uncheck
} else {
$('.select_all').prop('checked', true); //check
}
sum();
});
这是我使用 iCheck 的代码：（当我将代码转换为 iCheck 时，会出现此问题）
// Select All
$(".select_all").on("ifClicked", function () {
$(".select_all").on("ifChecked ifUnchecked", function (e) {
if (e.type == "ifChecked") {
$(".cart_item_checkbox").iCheck("check");
} else {
$(".cart_item_checkbox").iCheck("uncheck");
}
});
sum();
});
// Individual Checkboxes
$(".cart_item_checkbox").on("ifChanged", function () {
var total_length = $(".cart_item_checkbox").length;
var checked_length = $(".cart_item_checkbox").filter(":checked").length;
if (checked_length < total_length) {
$(".select_all").iCheck("uncheck");
} else {
$(".select_all").iCheck("check");
}
sum();
});
function sum() {
var grand_total = 0;
$(".cart_item_checkbox:checked")
.closest("tr")
.find(".total")
.each(function () {
total = $(this).data("total");
grand_total = grand_total + parseFloat(total);
});
$(".sub-total").text(formatToCurrency(grand_total));
$(".grand-total").text(formatToCurrency(grand_total));
$(":input.grand-total").val(grand_total);
return grand_total;
}
【问题讨论】：
-
您应该发布您的 html 代码...您可以通过打印
$(".cart_item_checkbox:checked").length来进行一些调试，并查看已检查元素的数量等于您在页面上看到的数量...或将检查循环中的框结束打印checked每个的状态...这会让您了解什么是错误的 -
我更新了问题并发布了 HTML 代码。我也按照您所说的进行了调试，似乎第一次单击时只有 2 个勾选的复选框。但是在我在其余时间单击
select_all后，它变成了 3 个勾选的复选框，除非我重新加载页面。