How do I get multiple values from checked checkboxes?

Question

I am trying to get multiple values from checked checkboxes and display them in a <p></p> tag. I also want to add the functionality to remove a selection by adding a cross (x) next to it.

I know there are many similar questions asked already on stackoverflow like this one, I haven't found a solution that works for me yet though.

I found this question on stackoverflow and it works great when checking the checkboxes BUT when you de-select a checkbox that has already been selected, all of the selections are removed as opposed to the one that was unchecked.

$('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 is a working fiddle.

Here is a screenshot of the design for the above functionality that I am trying to create:

Answer 1

The simplest way to achieve this is to re-build the list of selected items each time one changes. As you can see from your current logic, trying to find the element which was unchecked becomes a pain to maintain.

To build the list you can use :checked to retrieve only the selected checkboxes, then map() to build an array of their values as an array of HTML strings, before appending that where required. Try this:

$('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>