0

我正在尝试创建一个表单，该表单允许您以数字开头，然后通过填写文本框或检查值来慢慢删除内容

我见过这个 - http://jsfiddle.net/ZZX5D/只要它们都是文本框，它就可以工作。 

    $(function(){           
    $('input').each(function() {
        $(this).keyup(function(){  
            calculateTotal($(this));
        });
    });
});

 function calculateTotal(src) {
    var sum = 0;
    var sumtable = src.closest('.sumtable');

    sumtable.find('input').each(function() {
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });

    sumtable.find(".total").html(sum.toFixed(2));

    var bal = parseInt($('input[name="baseAmount"]').val());
    var earnedAmt = parseInt($('input[name="earnedAmount"]').val());
    bal = bal + earnedAmt - sum;
    sumtable.find(".balance").html(bal.toFixed(2));
}

我想做的是列出要选择的事物以及与之关联的值，并使用复选框将它们包括或排除在运行总数中。

起始数量 100.00 鸡蛋 2 肉 3 牛奶 5 总共剩余 100.00

所以如果我点击鸡蛋和肉旁边的复选框，剩余的总数变为 95.00。我想为每个产品分配值，但除非用户选中该框，否则不要将它们包含在总数中。他们取消选中它并将其从总数中删除。

我假设我需要更改函数的顶部，它将所有要减去的内容相加，但我不确定如何继续。

4

1 回答 1

0

有很多方法可以解决这个问题。这是你心目中的事情吗？

HTML：

<div>Starting amount: <span id="starting">100</span></div>
<div> <span>eggs:</span>  <span class="amt">2</span>
    <input type="checkbox" />
</div>
<div> <span>meat:</span>  <span class="amt">3</span>
    <input type="checkbox" />
</div> <span>milk:</span>  <span class="amt">5</span>
    <input type="checkbox" />
</div>
<div>Amount Remaining: <span id="remaining"></span></div>

然后在您的文档就绪功能中：

var starting = +$("#starting").text();
$("#remaining").text(starting);

$("input[type=checkbox]").click(function () {
    calculateTotal();
});

function calculateTotal() {
    var curr = starting;
    var checked = $("input:checked").each(function (item) {
        curr -= +($(this).prev(".amt").text());
    });
    $("#remaining").text(curr);
}

工作小提琴。

您可能会考虑添加许多潜在的改进。但就个人而言，我宁愿使用一个好的模板或绑定框架，也不愿像这样直接操作 DOM。

于 2013-06-21T18:01:45.973 回答