jQuery - 从 HTML 元素中检索值并返回它们的总和

Question

我得到了一个带有多个复选框的表单，用户可以在其中选择多个值，如下所示:

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

到目前为止，我一直在尝试使用 .text() 方法从 labels 获取 strings，制作一个 array 与结果，将它们转换为 int 使用 parseFloat() 并对数组元素求和...显然没有成功。

这就是我得到的(当然不是最好的方法，所以我愿意接受不同的解决方案):

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

解决方法如下，您可以去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>