Remove unchecked checkbox from array

Question

I have a bunch of checkboxes:

<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

JS code like this, which generates all the names of the checked inputs.

$('#other-products').on('change', function() {
    var selectedProducts = [];
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      $('.list-products').html(showtimesAsString);
    });
});

The problem is, when I select few checkboxes, then unselect all of them, last unselected checkbox title is shown in .list-products. Any ideas why it is not empty? Thanks!

When you uncheck the last checkbox, there is no checked item and so the each loop will not execute. — JGV
– JGV, Commented Feb 9, 2016 at 19:02
From api.jquery.com/change - "This event is limited to <input> elements, <textarea> boxes and <select> elements" — Vijay Dev
– Vijay Dev, Commented Feb 9, 2016 at 19:10

JGV · Accepted Answer · 2016-02-09 19:04:55Z

2

Try resetting the html content of the list-products outside of the loop.

https://jsfiddle.net/99x50s2s/188/

 $('#other-products').on('change', function() {
    var selectedProducts = [];
    var listProductsCtrl = $('.list-products');
    listProductsCtrl.html(''); //reset the values here
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      listProductsCtrl.html(showtimesAsString);
    });
});

answered Feb 9, 2016 at 19:04

JGV

5,2079 gold badges57 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett DeWoody · Accepted Answer · 2016-02-09 19:08:49Z

In addition to causing your script to not work as intended, setting showtimesAsString in $.each in inefficient. Move the 2 lines where you create the string and set the .html() outside of $.each().

$('#other-products').on('change', function() {
  var selectedProducts = [];

  $('#other-products input[type="checkbox"]:checked').each(function() {
    selectedProducts.push($(this).attr('name'));

  });

  var showtimesAsString = selectedProducts.join(', ');
  $('.list-products').html(showtimesAsString);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

Darren · Accepted Answer · 2016-02-09 19:06:18Z

0

You could change your code to something like the following:

$('#other-products').on('change', function() {
    var selectedProducts = $('#other-products input[type="checkbox"]:checked');
    var showtimesAsString = "";

    selectedProducts.each(function() {
       showtimesAsString += $(this).attr("name") + ",";
    });

    $('.list-products').html(showtimesAsString);
});

https://jsfiddle.net/5bu0sqjf/

answered Feb 9, 2016 at 19:06

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Comments

Floern · Accepted Answer · 2016-02-09 19:29:20Z

0

$('#other-products').on('change', function() {
    var selectedProducts = [];
    $('.list-products').html('');
    $('#other-products input[type="checkbox"]:checked').each(function() {
      selectedProducts.push($(this).attr('name'));
      var showtimesAsString = selectedProducts.join(', ');
      $('.list-products').html(showtimesAsString);
    });
});

edited Feb 9, 2016 at 19:29

Floern

34k24 gold badges106 silver badges122 bronze badges

answered Feb 9, 2016 at 19:16

suman das

3651 silver badge12 bronze badges

Comments

twernt · Accepted Answer · 2016-03-09 18:22:16Z

0

You can use jQuery's map() function to really simplify the code and avoid having to manually reset your array and output string.

$(function() {
  $('#other-products').on('change', function() {
    var names = $('#other-products input[type="checkbox"]:checked').map(function() {
      return $(this).attr('name');
    }).get();
    $('.list-products').html(names.join(', '));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="other-products">
  <input type="checkbox" name="First" value="1">
  <input type="checkbox" name="Second" value="2">
  <input type="checkbox" name="Third" value="3">
</div>
<span class="list-products"></span>

edited Mar 9, 2016 at 18:22

answered Feb 9, 2016 at 19:20

twernt

20.6k5 gold badges35 silver badges41 bronze badges

Collectives™ on Stack Overflow

Remove unchecked checkbox from array

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related