jQuery - извлекает значения из элементов HTML и возвращает их сумму

Question

Я получил 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 и вернуть их общую сумму (то есть: всего = 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);

Answer 1

Решение заключается в следующем, вы можете пойти здесь , чтобы попробовать демо

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

Answer 2

Ну, во-первых, измените часть 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);
};