jQuery的 - 從HTML元素中檢索值，並返回它們的總和

Question

我與幾個checkbox的，用戶可以選擇多個值，像這樣得到了form：

<div> 
    <input id="myinput1" type="checkbox" value="choice_id_1" /> 
    <label for="myinput1">5</label> 
</div> 
<div> 
    <input id="myinput2" type="checkbox" value="choice_id_2" /> 
    <label for="myinput2">10</label> 
</div> 
<div> 
    <input id="myinput3" type="checkbox" value="choice_id_3" /> 
    <label for="myinput3">10</label> 
</div> 

我需要從每個:selected獲取值複選框label並返回它們的總金額（即：總計= 25）。

到目前爲止，我一直在試圖獲得來自labels的strings與.text()方法，使一個array的結果，將它們轉換爲int與parseFloat()，總結數組元素... obviosly沒有成功。

這是我得到（肯定不是最好的方法，所以我開到diferent解決方案）：

function totalSum() { 
    var prices = $("input:checkbox:checked").siblings("label").text(); 
    var myArray = $.makeArray(prices); 

    var total = 0; 
    for(var i = 0; i < myArray.length; i++){ 
     var thisVal = parseFloat(myArray[i]); 
     if(!isNaN(thisVal)){ 
      total += thisVal; 
     } 
    }; 

    $(".mydiv").text(total); 
}; 

totalSum(); 
$("input:checkbox").change(totalSum); 

Answer 1

好一件事每個複選框的value部分更改爲相同的標籤的價值（如果你不能做到這一點，你可以利用輸入的name屬性如下圖所示）：

<div> 
    <input id="myinput2" type="checkbox" value="choice_2" name="10"/> 
    <label for="myinput2">10</label> 
</div> 

，然後JS可以是這樣的：

function totalSum() { 
    var prices = $("input:checkbox:checked"); 

    var total = 0; 

    $.each(prices, function(index, obj){ 
     total += parseFloat($(obj).attr('name')); 
    }) 


    $(".mydiv").text(total); 
}; 

Answer 2

的解決方案是如下，你可以去here嘗試演示

<form id="sum" action="#"> 
<div><input id="myinput1" type="checkbox" value="choice_id_1" /> 
<label for="myinput1">5</label></div> 
<div><input id="myinput2" type="checkbox" value="choice_id_2" /> 
<label for="myinput2">10</label></div> 
<div><input id="myinput3" type="checkbox" value="choice_id_3" /> 
<label for="myinput3">10</label></div> 
<input class="submit" type="submit" value="Submit" /> 
<div id="result"></div> 
</form> 

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('.submit').click(function(event){ 
    var sum = 0; 
    jQuery('form#sum').find(':checkbox').each(function() { 
     if (jQuery(this).is(':checked')) { 
     var labelVal = parseInt(jQuery(this).next().text()); 
     sum +=labelVal; 
     } 
    }); 
    jQuery('#result').text('The total is ' + sum); 
    }); 
}); 
</script>