如何使用jQuery .get（）将结果存储在单独的元素中

Question

在此代码中展示：https://codepen.io/alvintrilliams/pen/bWJVLY

我正在使用jQuery来获取“set”中已选中复选框的值列表。

虽然没有复选框的多个“集合”，但它的确有效。

在codepen中，如果我勾选1和B，它会显示：

  

数字：1，B。信件：1，B。

应该是：

  

数字：1。来信：B。

我无法理解如何将变量存储2（或更多）组结果，然后在相应元素中显示结果。

jQuery的：

$(".checkboxes").on('click', function() { 
  var boxes = ($("input:checked").map(function() {
    return this.value;
  }).get().join(","));
  $('.checkboxes').find(".checked").text(boxes);
});

HTML：

<div class="checkboxes">

  Numbers: <span class="checked"></span>
  <br>
  <input name="numbers" type="checkbox" value="1"/>1
  <input name="numbers" type="checkbox" value="2"/>2
  <br>

  Letters: <span class="checked"></span>
  <br>
  <input name="letters" type="checkbox" value="A"/>A
  <input name="letters" type="checkbox" value="B"/>B

</div>

Answer 1

问题是您映射了所有复选框，然后在所有跨度中存储相同的结果。

以下代码适用于显示的HTML结构，通过迭代输出范围并使用LinearLayout仅查找之前下一个跨度或容器div末尾的复选框：

＆＃13;

＆＃13;

.nextUntil()

＆＃13;

$(".checkboxes").on('click', function() {
  $(".checked").each(function() {
    var boxes = $(this).nextUntil("span")
      .filter("input:checked")
      .map(function() { return this.value })
      .get()
      .join(",");
    $(this).text(boxes);
  });
});

＆＃13;

＆＃13;

＆＃13;

使用这样的<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="checkboxes"> Numbers: <span class="checked"></span> <br> <input name="numbers" type="checkbox" value="1"/>1 <input name="numbers" type="checkbox" value="2"/>2 <br> Letters: <span class="checked"></span> <br> <input name="letters" type="checkbox" value="A"/>A <input name="letters" type="checkbox" value="B"/>B </div>有点脆弱，因为对HTML结构的更改很容易破坏它。如果您可以修改HTML以更直接地将跨度与其复选框关联起来会更好，可能是通过添加.nextUntil()（或data-checks="numbers"），或者只是在每个组周围添加包装元素然后添加点击处理程序到包装器，只处理当前包装器的内容：

＆＃13;

＆＃13;

="letters"

＆＃13;

$(".cbwrapper").on('click', function() {
  var wrapper = $(this);
  var boxes = wrapper.find("input:checked")
    .map(function() { return this.value })
    .get()
    .join(",");
  wrapper.find(".checked").text(boxes);
});

＆＃13;

＆＃13;

＆＃13;

请注意，这也使得HTML在一般意义上更容易阅读。

Answer 2

按名称选择复选框

$("input[type=checkbox]").on('change', function() { 
  var name = $(this).prop("name"),
      boxes = "";
  $("input[name="+name+"]:checked").each(function(i){
    boxes += (i>0?", ":"") + this.value;
  });
  $(".checked").eq(name=="numbers"?0:1).text(boxes);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">

  Numbers: <span class="checked"></span>
  <br>
  <input name="numbers" type="checkbox" value="1"/>1
  <input name="numbers" type="checkbox" value="2"/>2
  <br>

  Letters: <span class="checked"></span>
  <br>
  <input name="letters" type="checkbox" value="A"/>A
  <input name="letters" type="checkbox" value="B"/>B

</div>