Question

我有一个jQuery脚本，用于计算onclick复选框的总值。我想使用复选框值作为item name而是使用隐藏字段来获取值。我有办法将隐藏字段附加到相应的复选框并计算隐藏字段的值吗？

这是我想要发生的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

Answer 2

使用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;
}

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

2 个答案: