使用隐藏字段值而不是复选框值计算合计

Calculate total using hidden field value instead of checkbox value

本文关键字：复选框 计算 隐藏 字段      更新时间：2023-09-26

我有一个jQuery脚本，它计算单击时复选框的总值。我想使用复选框值作为item name，并使用隐藏字段来获取值。有没有一种方法可以将隐藏字段附加到相应的复选框，然后计算隐藏字段的值？

以下是我想要发生的事情。这是我的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>

不需要使用额外的隐藏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);
}

更新的fiddle

使用html5，您可以向元素添加自定义数据属性，例如

<input type="checkbox" id="sample" name="drink[]" value="Drink1" data-item-price="12">

（为了有效，它们需要从data-*开始，但在实践中，在任何浏览器中都没有必要）

从元素中获取属性是非常直接的：

document.getElementById("cnt").getAttribute("data-item-price")

在您的具体情况下：

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].getAttribute("data-item-price") * Number(frm.elements[i+1].value);
        }
    }
    document.getElementById("totalDiv").firstChild.data = "PHP" + tot;
}
相关文章：