jQuery更新具有数据价格属性的复选框上的初始价格

Question

我想更新Initial Price当单击具有data-price值的checkbox时，我会尝试做到这一点，但到目前为止没有运气，所以如果您建议我在哪里建议我，那将是非常明显的对此错误。所以这是代码;

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

html标记：

<div class="price">$ <span>10.00</span></div>
<hr />
<form>
    <label><input type="checkbox" name="Side Order" value="Side Order 1" />Side Order 1</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 2" />Side Order 2</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 3" />Side Order 3</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 4" />Side Order 4</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 5" />Side Order 5</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 6" data-price="5.00" />Side Order 6 (+ $5.00)</label>
    <label><input type="checkbox" name="Side Order" value="Side Order 7" data-price="5.00" />Side Order 7 (+ $5.00)</label>
</form>

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);