复选框计算不起作用
Checkbox calculation not working
$(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>
JavaScript
$(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)
});
});
您的复选框具有类似 $25.00 Gift Card
的值。您需要将其更改为数字,例如 25
.
如果您坚持使用当前的标记,则可以使用以下方法获得实际数字
var val = this.value.substr(1).split(' ')[0];
tot += +(val);
虽然擅长正则表达式的人可能会想出更漂亮的东西。
一种方法,使用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 正则表达式。
-
Number.prototype.toFixed()
. -
parseFloat()
. -
String.prototype.match()
.
-
- j查询:
-
get()
. -
map()
. -
text()
. -
val()
.
-
相关文章:
- 简单文本字段计算不起作用
- 对于使用传递的数据计算的局部范围变量,角度绑定在自定义指令中不起作用
- 通过jQuery在IE中计算时间戳 - 不起作用
- 为什么我的数据绑定到一个计算函数不起作用(使用knockout.js和jade)
- 变量计算不起作用(jquery/javascript)
- Wordpress jquery不起作用(计算系统)
- 计算节点数不起作用
- W3Schools AJAX 考试在本地计算机上不起作用
- Javascript计算不起作用
- 基于宽度计算的表格列显示和隐藏在 Safari IOS 设备中不起作用
- 距离计算在循环剂量不起作用
- 对计算可观察量的挖空 JS 绑定不起作用
- KnockoutJS和计算属性不起作用
- 复选框计算不起作用
- Ember控制器计算的属性(Object类型)更新不起作用
- javascript计算公式不起作用
- 用Javascript计算圆的周长和面积-函数不起作用
- 对作用域的性质进行计算;不起作用
- 为什么计算代码不起作用
- ajax post请求调用时,为什么函数计算两个元素之间的距离不起作用