jquery - 如何从选中的复选框中获取多个值？

Question

我正在尝试从选中的复选框中获取多个值并将它们显示在 <p></p> 中标签。我还想添加通过在旁边添加十字 (x) 来删除选择的功能。

我知道 stackoverflow 上已经有很多类似的问题了，比如 one ，不过我还没有找到适合我的解决方案。

我找到了this stackoverflow 上的问题，它在检查复选框时效果很好，但是当您取消选择已选中的复选框时，所有选择都会被删除，而不是未选中的选择。

$('input:checkbox[name="skills"]').change(function() {
  if ($(this).is(':checked')) {
    $('<span />').appendTo('#filter-2-result').text($(this).val());
  } else {
    $('#filter-2-result:contains(' + $(this).val() + ')').remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
  <div class="col-md-6">
    <p>Skills:</p>
  </div>
  <div class="col-md-6">
    <p class="filter" id="filter-2-result"><span class="deselect"></span></p>
  </div>
</div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingSkills">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#skillsCollapse" aria-expanded="true" aria-controls="skillsCollapse">
          Skills
        </a>
      </h4>
    </div>
    <div id="skillsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSkills">
      <div class="panel-body">
        <label>
          <input type="checkbox" name="skills" value="Accounting">Accounting</label>
        <label>
          <input type="checkbox" name="skills" value="Administration">Administration</label>
        <label>
          <input type="checkbox" name="skills" value="Budgeting">Budgeting</label>
      </div>
    </div>
  </div>

Here是一个工作 fiddle 。

这是我尝试创建的上述功能的设计屏幕截图:

Answer 1

实现这一目标的最简单方法是在每次更改时重新构建所选项目的列表。从当前的逻辑可以看出，尝试查找未检查的元素变得很难维护。

要构建列表，您可以使用 :checked 仅检索选定的复选框，然后使用 map() 将其值的数组构建为 HTML 字符串数组，然后在需要的地方附加该内容。试试这个:

$('input:checkbox[name="skills"]').change(function() {
  var values = $('input:checkbox[name="skills"]:checked').map(function() {
    //return `<span>${this.value.trim()}</span>`;
    return '<span>' + this.value.trim() + '</span>';
  }).get();

  $('#filter-2-result').empty().append(values);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">
  <div class="col-md-6">
    <p>Skills:</p>
  </div>
  <div class="col-md-6">
    <p class="filter" id="filter-2-result"><span class="deselect"></span></p>
  </div>
</div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingSkills">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#skillsCollapse" aria-expanded="true" aria-controls="skillsCollapse">
          Skills
        </a>
      </h4>
    </div>
    <div id="skillsCollapse" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSkills">
      <div class="panel-body">
        <label>
          <input type="checkbox" name="skills" value="Accounting">Accounting</label>
        <label>
          <input type="checkbox" name="skills" value="Administration">Administration</label>
        <label>
          <input type="checkbox" name="skills" value="Budgeting">Budgeting</label>
      </div>
    </div>
  </div>