Checked CheckBoxの合計値

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

このお試しください：

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

の属性の合計を取得するには、試してみてください。インラインスタイルに代わりにこれを使用するチェックボックスをクリックハンドラをバインドするためにも

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

： jQueryのバージョンをこれは：

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

もっと良い方法は、あなたのmでdata- *属性を使うことです以下のようなARKUP：

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