Question

I’m using play framework and jquery mobile and trying to sum custom tag values of checked checkboxes but i couldn’t manage this. Here is some code;

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

How can i sum to values of checked check boxes with jquery or pure javascript?

Answer 1

Try this:
jQuery version:

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

Also to bind the click handler to checkboxes use this instead on the inline style:

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

To get the sum of to attribute, try this:

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

A better approach would be to use data-* attributes in your markup like:

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

and the MySum function would be:

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