javascript - 使用隐藏字段值而不是复选框值计算总计

Question

我有一个 jQuery 脚本，可以计算单击时复选框的总值(value)。我想使用复选框值作为项目名称，并使用隐藏字段来获取该值。有没有办法让我将隐藏字段附加到相应的复选框并计算隐藏字段的值？

这是一个fiidle我想要发生的事情。这是我的 jQuery:

function total(frm) {
    var tot = 0;
    for (var i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].type == "checkbox") {
            if (frm.elements[i].checked) tot += Number(frm.elements[i].value) * Number(frm.elements[i+1].value);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "PHP" + tot;
}

<li>
    <label>        
        <input type="checkbox" name="drink[]" value="DrinkName1" onclick="total(this.form);"/>
        Sample Item
        <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
        <input type="hidden" name="drinkprice" value="12">
    </label>
</li>
<li>
    <label>        
        <input type="checkbox" name="drink[]" value="DrinkName2" onclick="total(this.form);"/>
         Sample Item
         <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
         <input type="hidden" name="drinkprice" value="6">
    </label>
</li>
<li>
    <label>        
        <input type="checkbox" name="drink[]" value="DrinkName3" onclick="total(this.form);"/>
 Sample Item
        <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" onclick="total(this.form);"/>
        <input type="hidden" name="drinkprice" value="4">
    </label>
</li>
<p>Total</p>
<div id="totalDiv">0</div>

Answer 1

无需使用额外的隐藏 input 元素来实现此目的。相反，您可以将自己的 data-* 属性添加到复选框以保存各个价格。您还可以向输入元素添加类，将它们分组在一起，使计算逻辑更容易。从那里开始，有一个简单的循环来合计所选项目。

最后请注意，使用不显眼的 Javascript 来附加事件处理程序而不是过时的 on* 事件属性也是更好的做法，并且您还应该使用 change 复选框事件以适应使用键盘导航的用户。

话虽如此，这应该可以达到您的要求:

<li>
    <label>
        <input type="checkbox" name="drink[]" class="drink" value="DrinkName3" data-price="4" /> Sample Item
        <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
    </label>
</li>

$('.quantity, .drink').change(calculateTotal);

function calculateTotal() {
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });
    $('#totalDiv').text(total);
}

Updated fiddle