我试图在用户点击复选框时获取小计。 我想要完成的是减少对静态代码的需求，并尝试使其更通用。因此，如果我添加另一行，代码将只计算行。
这是我的桌子。
<table class="order-table">
<thead>
<tr>
<th>Service</th>
<th>Description</th>
<th>Choose</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Identification</td>
<td>Identify Companies</td>
<td>
<asp:CheckBox ID="cbHOAID" runat="server" CssClass="oClick" />
</td>
<td>$30</td>
</tr>
<tr>
<td>Assesment</td>
<td>??</td>
<td>
<asp:CheckBox ID="cbAssesment" runat="server" CssClass="oClick" />
</td>
<td>$25</td>
</tr>
<tr>
<td>Payoff </td>
<td>???</td>
<td>
<asp:CheckBox ID="cbPayoff" runat="server" CssClass="oClick" />
</td>
<td>$25</td>
</tr>
<tr>
<td>Rent </td>
<td>???</td>
<td>
<asp:CheckBox ID="cbRentRestrictions" runat="server" CssClass="oClick" />
</td>
<td>$10</td>
</tr>
<tr>
<td>CC</td>
<td>???</td>
<td>
<asp:CheckBox ID="cbCCR" runat="server" CssClass="oClick" />
</td>
<td>$75</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Subtotal:</td>
<td class="subTotal"></td>
</tr>
</tbody>
</table>
以下是表格在页面上的呈现方式。
<table class="order-table">
<thead>
<tr>
<th>Service</th>
<th>Description</th>
<th>Choose</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>HOA Identification</td>
<td>Identify HOA and Management Companies</td>
<td>
<span class="oClick"><input id="MainContent_Wizard1_cbHOAID" type="checkbox" name="ctl00$MainContent$Wizard1$cbHOAID" /></span>
</td>
<td>$30</td>
</tr>
<tr>
<td>Assesment</td>
<td>??</td>
<td>
<span class="oClick"><input id="MainContent_Wizard1_cbAssesment" type="checkbox" name="ctl00$MainContent$Wizard1$cbAssesment" /></span>
</td>
<td>$25</td>
</tr>
<tr>
<td>Payoff /Ledger</td>
<td>???</td>
<td>
<span class="oClick"><input id="MainContent_Wizard1_cbPayoff" type="checkbox" name="ctl00$MainContent$Wizard1$cbPayoff" /></span>
</td>
<td>$25</td>
</tr>
<tr>
<td>Rent Restrictions</td>
<td>???</td>
<td>
<span class="oClick"><input id="MainContent_Wizard1_cbRentRestrictions" type="checkbox" name="ctl00$MainContent$Wizard1$cbRentRestrictions" /></span>
</td>
<td>$10</td>
</tr>
<tr>
<td>CC&R's</td>
<td>???</td>
<td>
<span class="oClick"><input id="MainContent_Wizard1_cbCCR" type="checkbox" name="ctl00$MainContent$Wizard1$cbCCR" /></span>
</td>
<td>$75</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Subtotal:</td>
<td class="subTotal"></td>
</tr>
</tbody>
</table>
这是最后的Jquery。
var Cart = {
$triggerBtn: $(".oClick"),
$checkBoxes: $(".oClick"),
$subTotalEl: $(".subTotal"),
calculate: function () {
var total = 0;
this.$triggerBtn.each(function () {
var $field = $(this);
var ischecked = $field.find("input[type='checkbox']").is(":checked");
if (ischecked == true) {
var amount = $field.parent().next().text();
var amountR = amount.replace(/\s+/g, "").replace(/\$/, "");
var n2 = Number(amountR);
var sum = n2;
total += sum;
}
});
total = "$" + total + " USD";
return total;
},
trigger: function () {
var self = this;
this.$triggerBtn.on("click", function (e) {
//e.preventDefault();
var subtotal = self.calculate();
self.$subTotalEl.text(subtotal);
});
},
init: function () {
this.trigger();
//this.$triggerBtn.trigger("click");
}
};
$(function () {
Cart.init();
});
更新
更新了javascript以显示它现在正在正确计算。我仍然需要弄清楚如何让它只在点击时计算，并且只有在选中复选框时才会计算。
更新2 我终于想出了如何检查复选框，只计算选中复选框的时间。
答案 0 :(得分：0)
我终于想出了在计算价格之前如何确保复选框已经过检查。这是最后的剧本。
如果您想查看它的实际效果，请参阅JSFiddle。
var Cart = {
$triggerBtn: $(".oClick"),
$checkBoxes: $(".oClick"),
$subTotalEl: $(".subTotal"),
calculate: function () {
var total = 0;
this.$triggerBtn.each(function () {
var $field = $(this);
var ischecked = $field.find("input[type='checkbox']").is(":checked");
if (ischecked == true) {
var amount = $field.parent().next().text();
var amountR = amount.replace(/\s+/g, "").replace(/\$/, "");
var n2 = Number(amountR);
var sum = n2;
total += sum;
}
});
total = "$" + total + " USD";
return total;
},
trigger: function () {
var self = this;
this.$triggerBtn.on("click", function (e) {
//e.preventDefault();
var subtotal = self.calculate();
self.$subTotalEl.text(subtotal);
});
},
init: function () {
this.trigger();
//this.$triggerBtn.trigger("click");
}
};
$(function () {
Cart.init();
});