jQuery: 取消勾选时如何防止商品价格被加到总价中？
jQuery: How to prevent item prices from being added to the total when they are unchecked?
我正在开发自定义结帐功能，jQuery 遇到了一些麻烦。我想要的是将选中的每个项目添加到小计和总计值中。另外，当一个项目被取消选中时，它不再被添加到小计和总计中。
目前，当我点击一个选项时，它会添加到小计和总计值中。但是，当我取消选中某个项目时，它仍然会再次添加到总数中。
这是我现在正在使用的笔的 URL：https://codepen.io/BFrancoeur/pen/abyQJqj
我尝试过的：
-- 使用 .off() 取消绑定每个事件。这对总数没有任何影响
-- 使用 .one() 将每个事件限制为单次触发（或触发器）。这也没有用。
-- 为每个项目创建条件（三元）运算符，并在 return sum += 0 为 false 时创建。这对结果没有影响
我在这里错过了什么？这是唯一阻碍我的事情。
直接查看代码，见下文
谢谢！
// jQuery
$(document).ready(function () {
// check ebook radio button by default
$("#pid-3727024-0").attr("checked", "checked");
// hide audiobook and bump offer line items by default
$("#li-audiobook").hide();
$("#li-acq-theory").hide();
var $ebookRadio = $("#pid-3727024-0");
var $audiobookRadio = $("#pid-3728625-0");
var $checkboxOffer = $("#bump_offer_1");
var $btnAddToMyOrder = $("#aadtomyOrder");
var $inputs = $("input[type=radio], input[type=checkbox]");
var $audiobookLineItem = $("#li-audiobook");
var $checkboxOfferLineItem = $("#li-acq-theory");
let sum = 0;
var $inputs = $("input[type=radio], input[type=checkbox]");
var $inputDataProductAmount = $inputs.attr("data-product-amount");
var inputArray = [];
var index = 0;
// update the line items
function updateOrderSummary() {
$audiobookRadio.is(":checked")
? $audiobookLineItem.show()
: $audiobookLineItem.hide();
$checkboxOffer.is(":checked")
? $checkboxOfferLineItem.show()
: $checkboxOfferLineItem.hide();
}
// update subtotal and total
function updateCheckout() {
$ebookRadio.is(":checked")
? (sum += parseFloat($ebookRadio.data("product-amount")))
: false;
$audiobookRadio.is(":checked")
? (sum +=
parseFloat($audiobookRadio.data("product-amount")) +
parseFloat($ebookRadio.data("product-amount")))
: false;
$checkboxOffer.is(":checked")
? (sum += parseFloat($checkboxOffer.data("product-amount")))
: false;
$("#subtotalValue").text("$" + sum.toFixed(2));
$("#totalValue").text("$" + sum.toFixed(2));
// updateOrderSummary();
}
$ebookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$audiobookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$checkboxOffer.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$btnAddToMyOrder.on("click", function () {
$checkboxOffer.trigger("click");
});
});
/* CSS */
body {
height: 100%;
background-color: #f0f0f0;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 0 auto;
display: flex;
font-family: "Open Sans", sans-serif;
}
.col50 {
width: 50%;
padding: 0 10%;
}
.col50:last-child {
padding: 30px;
background-color: #f0f0f0;
}
.text-red {
color: #ff0000;
}
.text-grey {
color: #888;
}
.big {
font-size: 26px;
}
ul {
list-style-type: none;
padding: 15px;
}
ul li {
width: 100%;
font-weight: 600;
line-height: 2;
}
li {
text-align: left;
}
li > span {
float: right;
}
.products div {
width: 100%;
}
.products div label {
width: 100%;
text-align: left;
}
.products label span {
float: right;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->
<div class="wrapper">
<div class="col50">
<div class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable" id="tmp_orpo-44887" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false">
<table class="elOrderProductOptions elProductOptionsBox" width="100%">
<tbody>
<tr class="clearfix elOrderProductOptinLabel elOrderProductOptinLabelTable">
<th class="pull-left elOrderProductOptinItem" width="70%"></th>
<th class="pull-right elOrderProductOptinLabelPrice elOrderProductOptinPriceTable" width="30%"></th>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName activeRadioProduct" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<input type="radio" id="pid-3727024-0" name="purchase[product_id]" value="3727024" data-product-label="Funnel Fusion Book" data-product-payment-type="onetime" data-product-amount="27.00" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-name="Funnel Fusion Book">
<label for="pid-3727024-0" data-cf-product-name="true">Funnel Fusion Book</label>
</td>
<td class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD"></td>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<input type="radio" id="pid-3728625-0" name="purchase[product_id]" value="3728625" data-product-label="eBook + Audiobook (Add for only .97 more)" data-product-payment-type="onetime" data-product-amount="9.97" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-display-amount="Add for only .97 more" data-product-name="eBook + Audiobook">
<label for="pid-3728625-0" data-cf-product-name="true">eBook + Audiobook </label>
</td>
<td class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD">Add for only .97 more</td>
</tr>
</tbody>
</table>
</div>
<div class="inner">
<!-- <form>
<div class="form-group">
<ul class="products">
<li class="product">
<div id="product_1">
<input id="pid-3727024-0" type="radio" name="addon">
<label for="ebook">eBook Only <span>.00</span></label>
</div>
</li>
<li class="product">
<div id="product_2">
<input id="pid-3728625-0" type="radio" name='addon'>
<label for="audiobook">eBook + Audiobook <span>.95</span></label>
</div>
</li>
</ul>
</div>
</form> -->
</div>
</div>
<div class="col50">
<div class="inner">
<div id="orderFormBump" class="dashed orderFormBump" style="border: 3px dashed rgb(255, 0, 0); box-sizing: border-box; padding: 15px 20px 45px 20px; background-color: #ffffff; text-align: left;">
<div class="sectioncontent" style=" text-align: left;">
<div style="padding: 1px 10px; margin-bottom: 10px; background-color: #ffffff; text-align: center; background-position: initial initial; background-repeat: initial initial; text-align: left;">
<label class="checkbox inline" style=" cursor: pointer; font-size: 14px; font-weight: normal; line-height: 20px; display: inline-block; margin-bottom: 0px; min-height: 20px; padding-left: 20px; padding-top: 0px; margin-top:-1px; vertical-align: middle;">
<img src="https://assets.clickfunnels.com/templates/listhacking-sales/images/arrow-flash-small.gif" alt="" style="max-width: 100%; height: auto; vertical-align: middle; border: 0px; float: left; position: relative; left: -25px;" data-cf-id="flashing-arrow" data-cf-note="flashing arrow" data-cf-editable-type="image">
<input type="checkbox" name="purchase[product_ids][]" id="bump_offer_1" class="checkbox-inline order-bump" style="margin: 4px 0px 0px -20px; cursor: pointer;float: left;" data-product-amount="29.97" data-storage="false">
</label>
<label class="checkbox inline" style="font-weight: bold; color: #ff0000; line-height: 20px; display: inline; min-height: 20px; vertical-align: middle; margin-bottom: 0px; padding-left: 0px; padding-top: 5px;"><strong style="color: #ff0000;">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></strong>
</label>
</div>
<div class="text-center" style="text-align: center;">
<p style="text-align: left" data-cf-id="order-bump" data-cf-note="orderform bump" data-cf-editable-type="rich-text">
<font size="2"><u>
<font color="#CC3300"><b class="otoText"></b></font>
</u> <span class="otoText2">Get instant access to the <em><strong><u>Advanced Acquisition Theory Course</u></strong></em>, an in depth step-by-step course that will show you the <u>latest cutting edge strategies</u>, <u>techniques</u> and <u>tactics</u> for growing your online business - using <strong>strategies very few online business owners even know exist</strong>. You will be able to get more customers, get more clients and scale your business faster than you ever thought possible. Usually <s>7</s>, <strong>but today's special deal is .95 (7.05 savings).</strong></span></font>
</p>
<button type="button" opt-val="no" class="yesaddtoorder" id="aadtomyOrder">Yes! Add To My Order <i aria-hidden="true" class="fa fa-mouse-pointer"></i></button>
</div>
</div>
</div>
<!-- <div id="bump-offer" class="bump-offer">
<h2>Bump Offer</h2>
<input type="checkbox" id="advanced-acquisition-theory" name="advanced-acquisition-theory" value="29.95">
<label for="advanced-acquisition-theory">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus. Et netus et malesuada fames ac turpis. Neque vitae tempus quam pellentesque nec nam aliquam. Faucibus interdum posuere lorem ipsum dolor sit. Neque convallis a cras semper auctor neque vitae tempus quam. Posuere ac ut consequat semper. Donec massa sapien faucibus et molestie ac feugiat sed lectus. Dolor morbi non arcu risus quis. In ornare quam viverra orci sagittis eu volutpat odio.</p>
<button type="button" id="btn-bump-offer">Yes! Add To My Order Now!</button>
</div> -->
<div class="order-summary">
<form action="">
<ul class="purchase-summary">
<li class="text-red big">
Regular Price: <span><s></s></span>
</li>
<li class="summary-item">
Your Price Today: <span>.00</span>
</li>
<li id="li-audiobook" class="summary-item" value="audiobookAddon">
AC Audiobook: <span>.97</span>
</li>
<li id="li-acq-theory" class="summary-item" value="acquisitionTheoryBump">
Advanced Acquisition Theory: <span><span>.97</span>
</li>
<li id="li-subtotal" class="summary-item">
Subtotal: <span id="subtotalValue">[=13=].00</span>
</li>
<li class="summary-item text-grey">
Tax: <span id="taxValue">[=13=].00</span>
</li>
<li id="li-total" class="summary-item big">
Total: <span id="totalValue">[=13=].00</span>
</li>
</ul>
<div class="place-order">
<a href="#submit-form" class="elButton elButtonSubtle elButtonSize1 elButtonColor1 elButtonFull deUppercase elBtnHP_00 elButtonShadow1 elButtonTxtColor1 de2pxLetterSpacing" style="color: rgb(0, 9, 36); background-color: rgb(233, 120, 40); font-size: 24px;">
<span class="elButtonMain">Place My Order<i class="fa_appended fas fa-mouse-pointer" contenteditable="false"></i></span>
<span class="elButtonSub"></span>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
唯一一次 sum 的值为 0 是在触发 .ready() 函数时。每次触发 updateCheckout() 函数时，您只会添加到 sum 而永远不会从中减去。
您需要做的是在该函数的最开头设置 sum=0;，以便每次都完全重新计算所有内容。
我正在开发自定义结帐功能，jQuery 遇到了一些麻烦。我想要的是将选中的每个项目添加到小计和总计值中。另外，当一个项目被取消选中时，它不再被添加到小计和总计中。
目前，当我点击一个选项时，它会添加到小计和总计值中。但是，当我取消选中某个项目时，它仍然会再次添加到总数中。
这是我现在正在使用的笔的 URL：https://codepen.io/BFrancoeur/pen/abyQJqj
我尝试过的：
-- 使用 .off() 取消绑定每个事件。这对总数没有任何影响 -- 使用 .one() 将每个事件限制为单次触发（或触发器）。这也没有用。 -- 为每个项目创建条件（三元）运算符，并在 return sum += 0 为 false 时创建。这对结果没有影响
我在这里错过了什么？这是唯一阻碍我的事情。
直接查看代码，见下文
谢谢！
// jQuery
$(document).ready(function () {
// check ebook radio button by default
$("#pid-3727024-0").attr("checked", "checked");
// hide audiobook and bump offer line items by default
$("#li-audiobook").hide();
$("#li-acq-theory").hide();
var $ebookRadio = $("#pid-3727024-0");
var $audiobookRadio = $("#pid-3728625-0");
var $checkboxOffer = $("#bump_offer_1");
var $btnAddToMyOrder = $("#aadtomyOrder");
var $inputs = $("input[type=radio], input[type=checkbox]");
var $audiobookLineItem = $("#li-audiobook");
var $checkboxOfferLineItem = $("#li-acq-theory");
let sum = 0;
var $inputs = $("input[type=radio], input[type=checkbox]");
var $inputDataProductAmount = $inputs.attr("data-product-amount");
var inputArray = [];
var index = 0;
// update the line items
function updateOrderSummary() {
$audiobookRadio.is(":checked")
? $audiobookLineItem.show()
: $audiobookLineItem.hide();
$checkboxOffer.is(":checked")
? $checkboxOfferLineItem.show()
: $checkboxOfferLineItem.hide();
}
// update subtotal and total
function updateCheckout() {
$ebookRadio.is(":checked")
? (sum += parseFloat($ebookRadio.data("product-amount")))
: false;
$audiobookRadio.is(":checked")
? (sum +=
parseFloat($audiobookRadio.data("product-amount")) +
parseFloat($ebookRadio.data("product-amount")))
: false;
$checkboxOffer.is(":checked")
? (sum += parseFloat($checkboxOffer.data("product-amount")))
: false;
$("#subtotalValue").text("$" + sum.toFixed(2));
$("#totalValue").text("$" + sum.toFixed(2));
// updateOrderSummary();
}
$ebookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$audiobookRadio.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$checkboxOffer.on("click", function () {
updateCheckout();
updateOrderSummary();
});
$btnAddToMyOrder.on("click", function () {
$checkboxOffer.trigger("click");
});
});
/* CSS */
body {
height: 100%;
background-color: #f0f0f0;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
margin: 0 auto;
display: flex;
font-family: "Open Sans", sans-serif;
}
.col50 {
width: 50%;
padding: 0 10%;
}
.col50:last-child {
padding: 30px;
background-color: #f0f0f0;
}
.text-red {
color: #ff0000;
}
.text-grey {
color: #888;
}
.big {
font-size: 26px;
}
ul {
list-style-type: none;
padding: 15px;
}
ul li {
width: 100%;
font-weight: 600;
line-height: 2;
}
li {
text-align: left;
}
li > span {
float: right;
}
.products div {
width: 100%;
}
.products div label {
width: 100%;
text-align: left;
}
.products label span {
float: right;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->
<div class="wrapper">
<div class="col50">
<div class="de clearfix elOrderProductOptionsWrapper elMargin0 ui-droppable de-editable" id="tmp_orpo-44887" data-de-type="orpo" data-de-editing="false" data-title="Select Product 2.0" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;" aria-disabled="false">
<table class="elOrderProductOptions elProductOptionsBox" width="100%">
<tbody>
<tr class="clearfix elOrderProductOptinLabel elOrderProductOptinLabelTable">
<th class="pull-left elOrderProductOptinItem" width="70%"></th>
<th class="pull-right elOrderProductOptinLabelPrice elOrderProductOptinPriceTable" width="30%"></th>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName activeRadioProduct" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<input type="radio" id="pid-3727024-0" name="purchase[product_id]" value="3727024" data-product-label="Funnel Fusion Book" data-product-payment-type="onetime" data-product-amount="27.00" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-name="Funnel Fusion Book">
<label for="pid-3727024-0" data-cf-product-name="true">Funnel Fusion Book</label>
</td>
<td class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD"></td>
</tr>
<tr class="clearfix elOrderProductOptinProducts elOrderProductOptinProductName" data-cf-product-template="true">
<td class="pull-left elOrderProductOptinTableProductName">
<input type="radio" id="pid-3728625-0" name="purchase[product_id]" value="3728625" data-product-label="eBook + Audiobook (Add for only .97 more)" data-product-payment-type="onetime" data-product-amount="9.97" data-payment-gateway-type="" data-product-currency-code="USD" data-business-name="WebSapientClickFunnels" data-product-display-amount="Add for only .97 more" data-product-name="eBook + Audiobook">
<label for="pid-3728625-0" data-cf-product-name="true">eBook + Audiobook </label>
</td>
<td class="pull-right elOrderProductOptinPrice elOrderProductOptinTablePriceName" data-cf-product-price="true" taxamo-currency="USD">Add for only .97 more</td>
</tr>
</tbody>
</table>
</div>
<div class="inner">
<!-- <form>
<div class="form-group">
<ul class="products">
<li class="product">
<div id="product_1">
<input id="pid-3727024-0" type="radio" name="addon">
<label for="ebook">eBook Only <span>.00</span></label>
</div>
</li>
<li class="product">
<div id="product_2">
<input id="pid-3728625-0" type="radio" name='addon'>
<label for="audiobook">eBook + Audiobook <span>.95</span></label>
</div>
</li>
</ul>
</div>
</form> -->
</div>
</div>
<div class="col50">
<div class="inner">
<div id="orderFormBump" class="dashed orderFormBump" style="border: 3px dashed rgb(255, 0, 0); box-sizing: border-box; padding: 15px 20px 45px 20px; background-color: #ffffff; text-align: left;">
<div class="sectioncontent" style=" text-align: left;">
<div style="padding: 1px 10px; margin-bottom: 10px; background-color: #ffffff; text-align: center; background-position: initial initial; background-repeat: initial initial; text-align: left;">
<label class="checkbox inline" style=" cursor: pointer; font-size: 14px; font-weight: normal; line-height: 20px; display: inline-block; margin-bottom: 0px; min-height: 20px; padding-left: 20px; padding-top: 0px; margin-top:-1px; vertical-align: middle;">
<img src="https://assets.clickfunnels.com/templates/listhacking-sales/images/arrow-flash-small.gif" alt="" style="max-width: 100%; height: auto; vertical-align: middle; border: 0px; float: left; position: relative; left: -25px;" data-cf-id="flashing-arrow" data-cf-note="flashing arrow" data-cf-editable-type="image">
<input type="checkbox" name="purchase[product_ids][]" id="bump_offer_1" class="checkbox-inline order-bump" style="margin: 4px 0px 0px -20px; cursor: pointer;float: left;" data-product-amount="29.97" data-storage="false">
</label>
<label class="checkbox inline" style="font-weight: bold; color: #ff0000; line-height: 20px; display: inline; min-height: 20px; vertical-align: middle; margin-bottom: 0px; padding-left: 0px; padding-top: 5px;"><strong style="color: #ff0000;">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></strong>
</label>
</div>
<div class="text-center" style="text-align: center;">
<p style="text-align: left" data-cf-id="order-bump" data-cf-note="orderform bump" data-cf-editable-type="rich-text">
<font size="2"><u>
<font color="#CC3300"><b class="otoText"></b></font>
</u> <span class="otoText2">Get instant access to the <em><strong><u>Advanced Acquisition Theory Course</u></strong></em>, an in depth step-by-step course that will show you the <u>latest cutting edge strategies</u>, <u>techniques</u> and <u>tactics</u> for growing your online business - using <strong>strategies very few online business owners even know exist</strong>. You will be able to get more customers, get more clients and scale your business faster than you ever thought possible. Usually <s>7</s>, <strong>but today's special deal is .95 (7.05 savings).</strong></span></font>
</p>
<button type="button" opt-val="no" class="yesaddtoorder" id="aadtomyOrder">Yes! Add To My Order <i aria-hidden="true" class="fa fa-mouse-pointer"></i></button>
</div>
</div>
</div>
<!-- <div id="bump-offer" class="bump-offer">
<h2>Bump Offer</h2>
<input type="checkbox" id="advanced-acquisition-theory" name="advanced-acquisition-theory" value="29.95">
<label for="advanced-acquisition-theory">Yes, Add <em>Advanced Acquisition Theory To My Order! (you're saving 85% today)</em></label>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate enim nulla aliquet porttitor lacus. Et netus et malesuada fames ac turpis. Neque vitae tempus quam pellentesque nec nam aliquam. Faucibus interdum posuere lorem ipsum dolor sit. Neque convallis a cras semper auctor neque vitae tempus quam. Posuere ac ut consequat semper. Donec massa sapien faucibus et molestie ac feugiat sed lectus. Dolor morbi non arcu risus quis. In ornare quam viverra orci sagittis eu volutpat odio.</p>
<button type="button" id="btn-bump-offer">Yes! Add To My Order Now!</button>
</div> -->
<div class="order-summary">
<form action="">
<ul class="purchase-summary">
<li class="text-red big">
Regular Price: <span><s></s></span>
</li>
<li class="summary-item">
Your Price Today: <span>.00</span>
</li>
<li id="li-audiobook" class="summary-item" value="audiobookAddon">
AC Audiobook: <span>.97</span>
</li>
<li id="li-acq-theory" class="summary-item" value="acquisitionTheoryBump">
Advanced Acquisition Theory: <span><span>.97</span>
</li>
<li id="li-subtotal" class="summary-item">
Subtotal: <span id="subtotalValue">[=13=].00</span>
</li>
<li class="summary-item text-grey">
Tax: <span id="taxValue">[=13=].00</span>
</li>
<li id="li-total" class="summary-item big">
Total: <span id="totalValue">[=13=].00</span>
</li>
</ul>
<div class="place-order">
<a href="#submit-form" class="elButton elButtonSubtle elButtonSize1 elButtonColor1 elButtonFull deUppercase elBtnHP_00 elButtonShadow1 elButtonTxtColor1 de2pxLetterSpacing" style="color: rgb(0, 9, 36); background-color: rgb(233, 120, 40); font-size: 24px;">
<span class="elButtonMain">Place My Order<i class="fa_appended fas fa-mouse-pointer" contenteditable="false"></i></span>
<span class="elButtonSub"></span>
</a>
</div>
</form>
</div>
</div>
</div>
</div>
唯一一次 sum 的值为 0 是在触发 .ready() 函数时。每次触发 updateCheckout() 函数时，您只会添加到 sum 而永远不会从中减去。
您需要做的是在该函数的最开头设置 sum=0;，以便每次都完全重新计算所有内容。