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，将其转换为{{1使用int并对数组元素求和......显然没有成功。

这就是我得到的（肯定不是最好的方法，所以我对不同的解决方案持开放态度）：

parseFloat()

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>

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

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

2 个答案: