javascript - 对选中的复选框值求和

Question

我正在使用 play framework 和 jquery mobile 并尝试对选中复选框的自定义标签值求和，但我无法管理这个。这是一些代码；

<form  action="@{Waiter.payAServing()}" method="POST">
<div class="boxes"> 
#{list items:servs, as:'serving'}   
    <fieldset data-role="fieldcontain"> 
        <div class="ui-block-a">
        <input onclick="MySum()" type="checkbox" name="item" id="checkbox-${serving_index}" value="${serving.id}" to="${serving.item.price*serving.amount}" />
        <label for="checkbox-${serving_index}">${serving.item.title} &nbsp; &nbsp; </label>
        </div>

        <div class="ui-block-b"><h2><center>  &nbsp; &nbsp; ${serving.item.price*serving.amount} TL &nbsp;</center></h2></div>          

        <div class="ui-block-c"><h2> ${serving.amount} </h2></div>


</fieldset>     
    #{/list}
</div>
<input type="hidden" name="rid" id="rid" value="${rID}" /><br />

<input type="submit" value="Pay!" />
</form> 

<div class="result"></div>

<script type="text/javascript" charset="${_reponse_encoding}">
function MySum() {

alert(0);

var selectedCustomValue = document.getElementById("checkbox-1").getAttribute("to");

var sum = 0;

alert(selectedCustomValue); 
}

</script>

如何使用 jquery 或纯 javascript 对选中复选框的值求和？

Answer 1

试试这个：jQuery 版本：

function MySum(){
    var totalSum = 0;
    $("input:checked[name='item']").each(function(index, el){
        totalSum += parseFloat(el.value);
    });
    return totalSum;
}

还要将点击处理程序绑定到复选框，而是在内联样式上使用它：

$(function(){
  $("[name='item']").click(MySum);
});

要获得 to 属性的总和，请尝试以下操作：

function MySum(){
    var totalSum = 0;
    $("input:checked[name='item']").each(function(index, el){
        totalSum += parseFloat($(el).attr("to"));
    });
    return totalSum;
}

更好的方法是在标记中使用 data-* 属性，例如：

<input type="checkbox" 
       name="item" 
       id="checkbox-${serving_index}" 
       value="${serving.id}" 
       data-to="${serving.item.price*serving.amount}" />

MySum 函数将是：

function MySum(){
    var totalSum = 0;
    $("input:checked[name='item']").each(function(a, b){
        totalSum += parseFloat($(b).data("to"));
    });
    return totalSum;
}