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

问题描述

当我单击具有data-price值的checkbox时，我想更新Initial Price，我尝试完成此操作，但到目前为止还没有运气，因此如果您向我建议我错了，那将非常有意义.它.这是代码；

I want to update Initial Price when click on checkbox that has data-price value, i try to done it but no luck so far, so it would be highly appreciable if you advise me where I'm wrong about it. So here is the code;

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

推荐答案

此处更新了代码: 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);

这篇关于jQuery在具有数据价格属性的复选框上单击时更新初始价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！