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 + "']")返回空白的原因，因此.text()会返回空字符串。

您应该像这样指定：

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

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

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

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

或者，您可以将号码设置为input的{{1}}属性，然后使用value方法从val()元素中抓取它。

input

只要您可以，请始终为有意义的<input type="checkbox" value="3"> $('input').val() // "3"元素指定for属性。

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>

复选框标签的总和值

2 个答案: