如何在输入类型复选框中设置新属性并对该属性的值求和？答案

【问题标题】：How to set new attribute and sum the values of that attribute in input type checbox?如何在输入类型复选框中设置新属性并对该属性的值求和？
【发布时间】：2018-01-12 07:47:02
【问题描述】：

<input id="addfees" type="checkbox" name="rowid" value="feeid"> 通常有一些默认属性，例如 id、type、name、value。

除此之外，我需要传递一个自定义属性，比如feeamount = "3000"，我需要像<input type="checkbox" id="addfees" name="rowid" feeamount = "3000" value="feeid">这样的输入

这里我添加了feeamount作为自定义属性，并且我需要总结这个feamount，因为会有多行带有复选框，当用户单击每个复选框时，需要添加该复选框的feeamount属性和最终总和金额应该有结果。

而且我只需要有feeid的值属性。

我试过的复选框是，

<input type="checkbox" id="addfees" name="rowid" data-feeamount = "3000" value="feeid">

我尝试使用的 JavaScript 是，

var value = $("#addfees").data('fee-amount');
console.log(value);

但我认为这是处理这个问题的错误方法。如何设置新的自定义属性，并将该属性求和？

【问题讨论】：

我有点不确定到底是什么问题。

标签： javascript php jquery html checkbox

【解决方案1】：

如果您使用多个复选框，那么您可以使用 jQuery each() 方法来获取它。检查下面更新的 sn-p..

$('input[type=checkbox]').click(function() {
   var sum = 0;
   $('input[type=checkbox]:checked').each(function() {
      sum += $(this).data('feeamount');
   })
   $('#output').text(sum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="addfees1" name="rowid1" data-feeamount = "3000" value="feeid">
<input type="checkbox" id="addfees2" name="rowid2" data-feeamount = "1000" value="feeid">
<input type="checkbox" id="addfees3" name="rowid3" data-feeamount = "2000" value="feeid">
<input type="checkbox" id="addfees4" name="rowid4" data-feeamount = "5000" value="feeid">
<input type="checkbox" id="addfees5" name="rowid5" data-feeamount = "2000" value="feeid"><br \>
Result: <span id="output">0</span>

【讨论】：