我有一个表单，它有像示例中那样的输入复选框。js代码从检查的输入值中提取数字，并将它们一个接一个地输出。如何编辑代码，以便在选中第二个输入复选框时，输出是数字的总和？
这是PHP表单：
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 1 def" name="1">
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 2 def" name="2">
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 3 def" name="3">
我使用的JavaScript：
<script type="text/javascript">
function toggleCheckbox(element){
if (element.checked){
var number = element.value.replace ( /[^'d.]/g, '' );
document.getElementById("test").innerHTML += " " + number;
}
}
</script>
HTML字段：
<p id="test"></p>
您可以将附带的值存储在全局变量中，例如：
var sum = 0;
function toggleCheckbox(element){
var number = element.value.replace ( /[^'d.]/g, '' );
if (element.checked)
sum += Number(number);
else
sum -= Number(number);
document.getElementById("test").innerHTML = sum;
}
演示小提琴：http://jsfiddle.net/lparcerisa/08hLc37a/
有了jQuery，可以这样做：
$("input[type=checkbox]").click(function(){
var sum=0;
$("input[type=checkbox]:checked").each(function(index){
sum += Number($(this).val().replace( /[^'d.]/g,''));
});
$("#test").html(sum);
} );
演示小提琴（jquery）：http://jsfiddle.net/lparcerisa/res4k96j/2/
一种方法（给定修改后的HTML，在jQuery下面）是：
function toggleCheckbox(element) {
if (element.checked) {
var number = element.value.replace(/[^'d.]/g, '');
document.getElementById("test").innerHTML += " " + number;
}
}
// binding the change-event handler using jQuery, outside of the HTML:
$('input[type="checkbox"]').on('change', function () {
toggleCheckbox(this);
});
// binding the click-event handler:
$('#total').on('click', function(){
// using split() to get an array of the numbers:
var numbers = $('#test').text().split(' '),
// using Array.reduce() to iterate over the elements of the array:
total = numbers.reduce(function(a,b) {
// using '(+a) + (+b)' to coerce the array elements to numbers
// (from strings) and then summing them together:
return (+a) + (+b);
});
// setting the text of the '#result' element:
$('#result').text('(' + total + ')');
});
JS Fiddle演示。
修订HTML：
<input type="checkbox" value="abc 1 def" name="1" />
<input type="checkbox" value="abc 2 def" name="2" />
<input type="checkbox" value="abc 3 def" name="3" />
<button id="total">Find the total</button>
<span id="test"></span><span id="result"></span>
参考文献：
- JavaScript：
- CCD_ 1
- jQuery：
- CCD_ 2
text()