复选框计算不起作用
Posted
技术标签:
【中文标题】复选框计算不起作用【英文标题】：Checkbox calculation not working 【发布时间】：2014-11-17 22:12:04 【问题描述】：$(document).ready(function()
$("input[type=checkbox]").on("change", function()
var tot = 0;
$("input[type=checkbox]:checked").each(function()
tot += +(this.value);
);
$("#result").text("Total = " + tot);
$('#CRCGCA').val("Total = " + tot)
);
);<p>Gift Certificate Amount (check one or more)
<br />
<span class="wpcf7-form-control-wrap GRCGA"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required Multiple radio-vertical" id="GRCGA"><span class="wpcf7-list-item first"><label><input type="checkbox" name="GRCGA[]" value="$10.00 Gift Card" /> <span class="wpcf7-list-item-label">$10.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$20.00 Gift Card" /> <span class="wpcf7-list-item-label">$20.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$25.00 Gift Card" /> <span class="wpcf7-list-item-label">$25.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$40.00 Gift Card" /> <span class="wpcf7-list-item-label">$40.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$100.00 Gift Card" /> <span class="wpcf7-list-item-label">$100.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$200.00 Gift Card" /> <span class="wpcf7-list-item-label">$200.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$400.00 Gift Card" /> <span class="wpcf7-list-item-label">$400.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item last"><label><input type="checkbox" name="GRCGA[]" value="$500.00 Gift Card" /> <span class="wpcf7-list-item-label">$500.00 Gift Card</span>
</label>
</span>
</span>
</span>
</p>
<p>Gift Card Amount: <span class="wpcf7-form-control-wrap CRCGCA"><input type="text" name="CRCGCA" value="" size="8" maxlength="8" class="wpcf7-form-control wpcf7-text" id="CRCGCA" aria-invalid="false" /></span>
</p>
<p id="result"></p>我在计算复选框组的总数时遇到问题（此复选框集是多选的（可以选择一个或多个）我还希望将总数复制到名为礼品卡金额的文本框中。
html：
<p>
Gift Certificate Amount (check one or more)<br />
[checkbox* GRCGA id:GRCGA class:Multiple use_label_element class:radio-vertical "$10.00 Gift Card " "$20.00 Gift Card " "$25.00 Gift Card " "$40.00 Gift Card " "$100.00 Gift Card " "$200.00 Gift Card " "$400.00 Gift Card " "$500.00 Gift Card"]
</p>
Gift Card Amount: [text CRCGCA 8/8 id:CRCGCA]
<p id="result"></p>
$(document).ready(function()
$("input[type=checkbox]").on("change", function()
var tot = 0;
$("input[type=checkbox]:checked").each(function()
tot += +(this.value);
);
$("#result").text("Total = " + tot);
$('#CRCGCA').val("Total = " + tot)
);
);
【问题讨论】：
可以加jsfiddle吗？ 请显示（相关的，最小的）HTML。可能还有一个 Stack Snippet，用于演示您的代码的作用（在问题编辑器中，文本区域上方的图像图标旁边带有铅笔的按钮）。 感谢您让我知道如何做这个我从来不知道的小 sn-p。我编辑了我的问题。 【参考方案1】：您的复选框具有$25.00 Gift Card 之类的值。您需要将其更改为数字，例如25.
如果您坚持使用当前标记，您可以使用获得实际数字
var val = this.value.substr(1).split(' ')[0];
tot += +(val);
虽然擅长正则表达式的人可能会发现更漂亮的东西。
【讨论】：
有没有办法允许值 是的，使用JS可以将最终输出金额转换为$。 @Annie 你的意思是保持值不变，但仍然计算总和？ 去掉第二行输入并添加 找出$符号【参考方案2】：一种方法，使用String.prototype.match() 和Array.prototype.reduce()：
$(document).ready(function()
$("input[type=checkbox]").on("change", function()
// concatenating a currency symbol to the result of mapping the checked checkboxes:
var total = '$' + $('input[type="checkbox"]:checked').map(function()
// matching one-or-more numbers ('\d+') followed by a (literal) period ('\.')
// followed by one-or-more numbers:
var n = this.value.match(/\d+\.\d+/);
// if there was a match (and 'n' is therefore not-null), and has a length,
// we parseFloat that matched number string, otherwise we return 0:
return n && n.length ? parseFloat(n[0]) : 0;
// get() converts the 'map' into an array:
).get()
// reduce() sums together the array-elements ('a + b'):
.reduce(function (a, b)
return a + b;
// '0' is the supplied starting value for reduce():
, 0)
// toFixed(2) converts the number to a string, with two decimal places:
.toFixed(2);
$("#result").text("Total = " + total);
$('#CRCGCA').val("Total = " + total)
);
);
$(document).ready(function()
$("input[type=checkbox]").on("change", function()
var total = '$' + $('input[type="checkbox"]:checked').map(function()
var n = this.value.match(/\d+\.\d+/);
return n && n.length ? parseFloat(n[0]) : 0;
).get().reduce(function (a, b)
return a + b;
, 0).toFixed(2);
$("#result").text("Total = " + total);
$('#CRCGCA').val("Total = " + total)
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Gift Certificate Amount (check one or more)
<br />
<span class="wpcf7-form-control-wrap GRCGA"><span class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required Multiple radio-vertical" id="GRCGA"><span class="wpcf7-list-item first"><label><input type="checkbox" name="GRCGA[]" value="$10.00 Gift Card" /> <span class="wpcf7-list-item-label">$10.0 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$20.00 Gift Card" /> <span class="wpcf7-list-item-label">$20.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$25.00 Gift Card" /> <span class="wpcf7-list-item-label">$25.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$40.00 Gift Card" /> <span class="wpcf7-list-item-label">$40.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$100.00 Gift Card" /> <span class="wpcf7-list-item-label">$100.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$200.00 Gift Card" /> <span class="wpcf7-list-item-label">$200.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item"><label><input type="checkbox" name="GRCGA[]" value="$400.00 Gift Card" /> <span class="wpcf7-list-item-label">$400.00 Gift Card</span>
</label>
</span><span class="wpcf7-list-item last"><label><input type="checkbox" name="GRCGA[]" value="$500.00 Gift Card" /> <span class="wpcf7-list-item-label">$500.00 Gift Card</span>
</label>
</span>
</span>
</span>
</p>
<p>Gift Card Amount: <span class="wpcf7-form-control-wrap CRCGCA"><input type="text" name="CRCGCA" value="" size="8" maxlength="8" class="wpcf7-form-control wpcf7-text" id="CRCGCA" aria-invalid="false" /></span>
</p>
<p id="result"></p>参考资料：
JavaScript：Array.prototype.reduce()。
JavaScript regular expressions。
Number.prototype.toFixed()。
parseFloat()。
String.prototype.match()。
jQuery:
get()。
map()。
text()。
val()。
【讨论】：
以上是关于复选框计算不起作用的主要内容，如果未能解决你的问题，请参考以下文章