Question

我有以下html

<input type="checkbox" name="array[0][count]" value="1"/>
<input type="hidden" data-price="50" name="array[0][id]" value="1"/>

<input type="checkbox" name="array[1][count]" value="5"/>
<input type="hidden" data-price="20" name="array[1][id]" value="2"/>

.....

我想使用带有公式

的jQuery计算data-price的总和

foreach extra {
    price += extra[id][data-price] * extra[count]
}

//not actual code, just a representation of the result needed

到目前为止，我能够使用

收集所有输入

$('input[name^="array"]').each(function() {
    console.log($(this));
});

但我不知道如何继续前进。任何帮助赞赏。如果你能指出我构建html数组的更好方法，那我就可以了。

Answer 1

你非常接近。您需要做的就是立即从属性中获取价格。

$(this).attr("data-price");

我注意到并非所有'input[name^="array"]'都有数据属性，因此您需要在添加之前检查它是否存在，或者只是重命名具有实际数据属性的属性。

下面的代码工作正常

$('input[name^="array"]').each(function() {

var dPrice =$(this).attr("data-price");
if(dPrice){ //check if data-price exists for the input
  price+= parseInt($(this).attr("data-price"),10);
  }
});

Here's a working fiddle

获得属性后，应用您的公式并瞧！你已经完成了

评论更新：

从数组创建复选框时，您可以执行类似

的操作

<input type="hidden" data-price="50" name="array[0][id]" data-quantity=[count] value="1"/>

然后使用上面的代码获取data-quantity属性并在公式

中使用它

Answer 2

这样做的一种方法是机会一点点。

Frist，在html中使用隐藏字段加入输入复选框：

<input type="checkbox" name="array[]" data-price="50" value="1"/>

<input type="checkbox" name="array[]" data-price="20" value="5"/>

Secund，让js喜欢这样：

var total = 0;
$('input[name^="array"]').each(function() {
    if($(this)[0].checked){
        total += $(this).attr("data-price")  * $(this).attr("value");
    }
});

如果您不想选中复选框，请删除if。

如果total成为字符串，请使用parseInt

See in Fiddle working

如果您想维护像您这样的HTML

只更改一个将位置放在属性中的东西。 HTML ::

<input type="checkbox" name="array2[count]" data-pos="0" value="1"/>
<input type="hidden" data-price="50" name="array2[id][0]" value="1"/>

<input type="checkbox" name="array2[count]" data-pos="1" value="5"/>
<input type="hidden" data-price="20" name="array2[id][1]" value="2"/>

js就是这样：

    var total2 = 0;

  $('input[name^="array2[count]"]').each(function() {
    if($(this)[0].checked){
        var pos = $(this).attr("data-pos");
        total2 += $('input[name^="array2[id]['+pos+']"]').attr("data-price")  * $(this).attr("value");
    }

}）;

两个代码都在同一个小提琴中。测试1是第一个例子，测试2是这个例子

See in Fiddle working

foreach输入多维数组

2 个答案: