复选框标签的总和值

Question

我有带有标签的复选框 1 some text 我想从选中的复选框的标签中获取数字并将它们加在一起。我正在尝试做类似下面的事情，但它没有给我任何东西。

var total = 0;

$('input:checked').each(function () {
    total += parseInt($("label[for='" + this.id + "']").text());
});

这是一个复选框示例

<label><input type="checkbox" id="enbapicks-1" name="ENBApicks[1]" value="1" checked> 1 Golden State</label>
<label><input type="checkbox" id="enbapicks-5" name="ENBApicks[5]" value="1" checked> 5 Memphis</label>

Answer 1

你的 label 没有 for 属性，这就是为什么 $("label[for='" + this.id + "']") returns 空白，因此 .text() returns 空字符串.

你应该这样指定：

<input type="checkbox" id="enbapicks-1" name="ENBApicks[1]" value="1" checked>
<label for="enbapicks-1">1 Golden State</label>

如果您无法更改 HTML，您可以使用 parent() 方法从 input 获取 label：

<label><input type="checkbox" value="1" checked>1 Golden State</label>

$('input').parent().text() // "1 Golden State"

或者您可以将数字设置为 input 的 value 属性，然后使用 val() 方法从 input 元素中获取它。

<input type="checkbox" value="3">

$('input').val() // "3"

As long as you could, always specify for attribute for meaningful label elements.

Answer 2

正如我在评论中提到的。您应该将数据存储在更合乎逻辑的地方。一个选项是复选框的值，另一个是 data attribute，如下所示

$(document).ready(function(){
//Set a handler to catch clicking the check box
  $("#boxes input[type='checkbox']").click(function(){
    var total=0;
    //lOOP THROUGH CHECKED
    $("#boxes input[type='checkbox']:checked").each(function(){
         //Update total
          total += parseInt($(this).data("exval"),10);
    });
    $("#result").text(total);
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="boxes">
<label><input type="checkbox" id="enbapicks-1" name="ENBApicks[1]" value="1" data-exval="1"> 1 Golden State</label>
<label><input type="checkbox" id="enbapicks-5" name="ENBApicks[5]" value="1" data-exval="5"> 5 Memphis</label>
<label><input type="checkbox" id="enbapicks-7" name="ENBApicks[7]" value="1" data-exval="7"> 7 Who Knows</label>
  </div>
<div>Result: <span id="result"></span></div>

复选框标签的总和值

Sum values of checkbox labels

javascript

checkbox

jquery