第一次单击 "Select All" 复选框时总计未正确计算
Grand total not computing right in the first click of "Select All" checkbox
我创建了一个购物车页面。每个购物车项目都有自己的复选框。我使用 <input type="checkbox">
的常规复选框。在我使用 iCheck 插件之前一切正常。
我想不出更好的问题标题组合,因为情况很奇怪。
基本上,我想要发生的是,每次勾选复选框时,grand_total
都会反映出来。当我勾选复选框直到我单独检查所有复选框时,它工作正常。 grand_total
反映正确。但是,如果我第一次勾选 select all
复选框,它将计算所有 cart_items
,不包括购物车中的最后一项。当我最后一次单击 select_all
时,它反映正确。我不知道是什么原因造成的,因为当我使用常规复选框时它工作正常。也许我遗漏了什么。
下面是一个快速演示:
Quick Demo Video
在第一次点击 select_all
时,虽然选中了 3 个复选框,但似乎只有 2 个复选框被选中。
当我再次点击它时,现在每次都是 3 个。
所以似乎每次第一次点击 select 都会发生这种情况。然后工作正常。如果我重新加载页面,问题又来了。
这是我的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;
}
为了完成这项工作,我使用了 $(this).closest("div").hasClass("checked")
这将检查复选框的父项是否具有 checked
class,因为 iCheck 插件动态添加这个 class 。然后,根据哪个事件处理程序调用了 sum()
函数,我传递了不同的选择器。
演示代码 :
$(document).ready(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '20%',
handle: 'checkbox'
});
})
//keep only clicked..event
$(".select_all").on("ifClicked", function(e) {
//reverse cndtion..
if (!$(this).closest("div").hasClass("checked")) {
$(".cart_item_checkbox").iCheck("check");
} else {
$(".cart_item_checkbox").iCheck("uncheck");
}
sum($(".cart_item_checkbox").parent(".checked")); //pass the slector
});
$(".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($(".cart_item_checkbox:checked")); //here pass different selector
});
function sum(el) {
var grand_total = 0;
el.closest("tr")
.find(".total")
.each(function() {
total = $(this).data("total");
grand_total = grand_total + parseFloat(total);
});
//remove formatToCurrency..for demo..purpose.
$(".sub-total").text((grand_total));
$(".grand-total").text((grand_total));
$(":input.grand-total").val(grand_total);
return grand_total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<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">
<tr data-id="1">
<td class="text-center">
<input type="checkbox" name="" id="" class=" 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">
A
</p>
<p class="prod-price" data-price="12">₱ 12
</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="2" class="qty" disabled>
<button class="add-qty">+</button>
</div>
</td>
<td class="total text-right" data-total="24">₱ 24
</td>
</tr>
<tr data-id="2">
<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">
A
</p>
<p class="prod-price" data-price="12">₱ 12
</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="3" class="qty" disabled>
<button class="add-qty">+</button>
</div>
</td>
<td class="total text-right" data-total="36">₱ 36
</td>
</tr>
</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>
我创建了一个购物车页面。每个购物车项目都有自己的复选框。我使用 <input type="checkbox">
的常规复选框。在我使用 iCheck 插件之前一切正常。
我想不出更好的问题标题组合,因为情况很奇怪。
基本上,我想要发生的是,每次勾选复选框时,grand_total
都会反映出来。当我勾选复选框直到我单独检查所有复选框时,它工作正常。 grand_total
反映正确。但是,如果我第一次勾选 select all
复选框,它将计算所有 cart_items
,不包括购物车中的最后一项。当我最后一次单击 select_all
时,它反映正确。我不知道是什么原因造成的,因为当我使用常规复选框时它工作正常。也许我遗漏了什么。
下面是一个快速演示: Quick Demo Video
在第一次点击 select_all
时,虽然选中了 3 个复选框,但似乎只有 2 个复选框被选中。
当我再次点击它时,现在每次都是 3 个。
所以似乎每次第一次点击 select 都会发生这种情况。然后工作正常。如果我重新加载页面,问题又来了。
这是我的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;
}
为了完成这项工作,我使用了 $(this).closest("div").hasClass("checked")
这将检查复选框的父项是否具有 checked
class,因为 iCheck 插件动态添加这个 class 。然后,根据哪个事件处理程序调用了 sum()
函数,我传递了不同的选择器。
演示代码 :
$(document).ready(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
increaseArea: '20%',
handle: 'checkbox'
});
})
//keep only clicked..event
$(".select_all").on("ifClicked", function(e) {
//reverse cndtion..
if (!$(this).closest("div").hasClass("checked")) {
$(".cart_item_checkbox").iCheck("check");
} else {
$(".cart_item_checkbox").iCheck("uncheck");
}
sum($(".cart_item_checkbox").parent(".checked")); //pass the slector
});
$(".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($(".cart_item_checkbox:checked")); //here pass different selector
});
function sum(el) {
var grand_total = 0;
el.closest("tr")
.find(".total")
.each(function() {
total = $(this).data("total");
grand_total = grand_total + parseFloat(total);
});
//remove formatToCurrency..for demo..purpose.
$(".sub-total").text((grand_total));
$(".grand-total").text((grand_total));
$(":input.grand-total").val(grand_total);
return grand_total;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<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">
<tr data-id="1">
<td class="text-center">
<input type="checkbox" name="" id="" class=" 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">
A
</p>
<p class="prod-price" data-price="12">₱ 12
</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="2" class="qty" disabled>
<button class="add-qty">+</button>
</div>
</td>
<td class="total text-right" data-total="24">₱ 24
</td>
</tr>
<tr data-id="2">
<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">
A
</p>
<p class="prod-price" data-price="12">₱ 12
</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="3" class="qty" disabled>
<button class="add-qty">+</button>
</div>
</td>
<td class="total text-right" data-total="36">₱ 36
</td>
</tr>
</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>