Question

我正在尝试使用一个表单，允许您从数字开始，然后通过填写文本框或检查值来慢慢删除

我见过这个 - 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。我想为每个产品分配值，但不包括在总数中，除非用户选中该框。他们取消选中它并将其从总数中删除。

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

Answer 1

有很多方法可以解决这个问题。这是你想到的那种事吗？

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

工作fiddle。

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

使用jquery收集和总计各种响应

1 个答案: