如何在输入类型checbox中设置新属性并求和该属性的值？

Question

通常， <input id="addfees" type="checkbox" name="rowid" value="feeid">具有一些默认属性，例如id，类型，名称，值。

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

在这里，我已经添加了Feeamount作为自定义属性，并且我还需要对这个Feeamount进行汇总，因为将有多个带有复选框的行，并且当用户单击每个复选框时，需要添加该复选框的Feeamount属性，并应得出最终的总金额。

而且我只需要具有Feeid的value属性。

我尝试过的复选框是

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

我尝试过的JavaScript是

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

但是我认为这是解决此问题的错误方法。 如何设置新的自定义属性，并对该属性求和？

Answer 1

如果您使用多个复选框，则可以使用jQuery each()方法来实现。 检查下面的更新的片段。

 $('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>