javascript - 使用更改功能

我只是想做一个简单的功能来尝试更改功能，但并没有按我预期的那样进行：/

我正在尝试做的是：
1-选中成本复选框时，将成本分配为（cost1.checked？cost1 = 10：0）
2-选中复选框后，将给出复选框成本总和的结果。

我得到的问题是：[object HTMLInputElement] [object HTMLInputElement] [object HTMLInputElement]

这是小提琴：http://jsfiddle.net/p3zbm/

这是我的代码：

$('#cost1').click(function(){
if(this.checked){
var cost1 = 10;
}else{
cost1 = 0;
}
});
$('#cost2').click(function(){
if(this.checked){
var cost2 = 20;
}else{
cost2 = 0;
}
});
$('#cost3').click(function(){
if(this.checked){
var cost3 = 30;
}else{
cost3 = 0;
}
});
$('.costs').change(function(){
var result = cost1 + cost2 + cost3;
$('.total').text(result);
});

我知道这太简单了：

最佳答案

从函数中声明变量，然后尝试使用函数进行重新计算（以确保在需要时调用该函数）。

var cost1 = 0;
var cost2 = 0;
var cost3 = 0;
function recalculate()  {
    var result = cost1 + cost2 + cost3;
    $('.total').text(result);
}
$('#cost1').click(function(){
    cost1 = this.checked ? 10 : 0;
    recalculate();

});
$('#cost2').click(function(){
    cost2 = this.checked ? 20 : 0;
    recalculate();
});
$('#cost3').click(function(){
    cost3 = this.checked ? 30 : 0;
    recalculate();
});

见jsFiddle