jquery - jQuery-从HTML元素检索值并返回其总和

我得到了一个带有多个form的checkbox，用户可以在其中选择多个值，如下所示：

<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获取值，并返回它们的总和（即：total = 25）。

到目前为止，我一直在尝试使用strings方法从labels中获取.text()，将结果制成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);

最佳答案

好吧，将每个复选框的value部分更改为与标签的值相同（如果不能执行此操作，则可以使用输入的名称attr，如下所示）：

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