jQuery更新初始价格点击具有data-price属性的复选框

我想在点击具有data-price值的checkbox时更新Initial Price ，我尝试做到但到目前为止没有运气，所以如果你告诉我哪里我错了，那将是非常值得注意的。 所以这是代码;

http://jsfiddle.net/2M4Gr/1/

HTML标记：

 
$ 10.00
 
 
 Side Order 1 Side Order 2 Side Order 3 Side Order 4 Side Order 5 Side Order 6 (+ $5.00) Side Order 7 (+ $5.00)  

jQuery代码:( 不确定我是否采用正确的方式）

 var $cbs = $('input'); function calcUsage() { var total = $('.price span').text(); $cbs.each(function () { if (this.checked) { total += parseInt(this.value); } }); $('.price span').text(total); } function displayVals() { calcUsage(); } $("select").change(displayVals); displayVals(); $cbs.click(calcUsage); 

Answer 1

这里更新了代码： http ： //jsfiddle.net/2M4Gr/2/

 var $cbs = $('input'); function calcUsage() { var total = parseInt($('.price span').text()); $cbs.each(function () { var price = $(this).data("price"); if (this.checked && price) { total += parseInt(price); } }); $('.price span').text(total); } function displayVals() { calcUsage(); } $("select").change(displayVals); displayVals(); $cbs.click(calcUsage);