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

我有一个jQuery脚本，它可以在单击时计算复选框的总值。我想改为使用复选框值作为

项目名称

，并使用隐藏字段获取值。有没有办法将隐藏字段附加到相应的复选框，并计算隐藏字段的值

下面是我想要发生的事情的一个例子。以下是我的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;
}

功能总计（frm）{
var-tot=0；
对于（变量i=0；i

样品


样品


样品

总数

0

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

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

在您的具体情况下：

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

功能总计（frm）
{
var-tot=0；
对于（变量i=0；i

无需使用额外隐藏的

输入

元素来实现此目的。相反，您可以将自己的

数据-*

属性添加到复选框中以保存单个价格。您还可以向输入元素添加类以将它们组合在一起，从而简化计算逻辑。从那里可以简单地循环汇总选定的项目

最后请注意，使用不引人注目的Javascript来附加事件处理程序，而不是在*事件属性上使用过时的

，也是一种更好的做法，您还应该使用复选框中的
更改
事件来适应那些使用键盘导航的人

综上所述，这将达到您的要求：

<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>

使用html5，您可以向元素添加自定义属性
这是不正确的。按原样添加您自己的自定义属性将使您的HTML无效。您只能在
数据-*
属性中添加您自己的自定义元数据。哦，我的天啊。我已经坚持了好几天了！解决方案不是这么简单吗！谢谢！还有一个问题，如果我有多个名称数组怎么办？例如，一个数组是name=“drink”，另一个数组是name=“sarth”？没关系。我把它解释为一个名称而不是一个类。问题解决了。谢谢！哎呀，[live]站点中的总数没有更新（）如果没有太多麻烦，你能检查一下吗？很抱歉，我现在处于困境，我在jquery中缺乏背景知识，这对我来说非常有效。非常感谢检查控制台，每个复选框都会出现错误单击：
Uncaught ReferenceError:total未定义
对不起，我不明白它是什么意思我承认jquery不是我的强项。我会继续寻找解决方案
<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>