Adding and removing checkbox values to an array not working

Question

I have done this before, but for some reason my current implementation isn't working.

I have some checkboxes and when clicked, I want that value put into an array. When that checkbox is clicked again, I want to remove that value.

HTML:

<div class="fieldwrap form-filters">
  <label for="filter0" class="icon-text checkbox">
      <input type="checkbox" id="filter0" name="filter0" value="Coast" class="hidden" />
    Coast</label>
  <label for="filter1" class="icon-text checkbox">
      <input type="checkbox" id="filter1" name="filter1" value="Great views" class="hidden" />
    Great views</label>
  <label for="filter2" class="icon-text checkbox">
      <input type="checkbox" id="filter2" name="filter2" value="Historic" class="hidden" />
    Historic</label>
  <label for="filter3" class="icon-text checkbox">
      <input type="checkbox" id="filter3" name="filter3" value="Moorland" class="hidden" />
    Moorland</label>
  <label for="filter4" class="icon-text checkbox">
      <input type="checkbox" id="filter4" name="filter4" value="Wildlife" class="hidden" />
    Wildlife</label>
  <label for="filter5" class="icon-text checkbox">
      <input type="checkbox" id="filter5" name="filter5" value="Woodland" class="hidden" />
    Woodland</label>
</div>

JS:

var filter_options = [];

$('.form-filters input:checkbox').click(function() {

    var name = $(this).val().trim();
    var index = filter_options.indexOf(name);
    if (index > -1) {
        filter_options = filter_options.slice(index, 1);
        console.log('Remove: '+name+' at index: '+index);
    } else {
        filter_options.push(name);
        console.log('Add: '+name);
    }

    $('#result').html(filter_options.join('; '));
    console.log(filter_options);

});

DEMO: http://jsfiddle.net/WTzKR/873/

For some reason it seems to randomly remove the values, but seems to always add them.

What have I done wrong?

For remove, do you not need to do slice(0, index) and slice(index + 1) to get the array parts before and after the remove index? — Taplar
– Taplar, Commented May 26, 2015 at 0:50

Tahir Ahmed · Accepted Answer · 2015-05-26 01:03:18Z

1

Simply change:

filter_options = filter_options.slice(index, 1);

to

filter_options.splice(index, 1);

in your if block.

splice is what you are looking for.

edited May 26, 2015 at 1:03

answered May 26, 2015 at 0:56

Tahir Ahmed

5,7372 gold badges20 silver badges28 bronze badges

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

1 Comment

Nic Hubbard Over a year ago

Yes, that worked! Thank you, such a simple mistake, but it made all the difference. Appreciate your help.

Rayon · Accepted Answer · 2015-05-26 00:51:10Z

Try this:

<script>
        var filter_options=[];
        $('.form-filters input:checkbox').click(function()
        {
            var name=$(this).val().trim();
            if(this.checked)
            {
                filter_options.push(name);
                console.log('Add: ' + name);
            }
            else
            {
                var index=filter_options.indexOf(name);
                if(index > -1)
                {
                    filter_options.splice(index, 1);
                    console.log('Remove: ' + name + ' at index: ' + index);
                }
            }
            $('#result').html(filter_options.join('; '));
            console.log(filter_options);
        });
    </script>

user2575725 · Accepted Answer · 2015-05-26 00:52:22Z

0

Try input:checkbox:checked selector to get only checked ones:

var filter_options = [];

$('.form-filters input:checkbox').click(function() {
    filter_options = $('.form-filters input:checkbox:checked').map(function(){
      return this.value; //get the checkbox value
    }).get();//get all values as array
    $('#result').html(filter_options.join('; '));
    console.log(filter_options);
});

answered May 26, 2015 at 0:52

user2575725

Comments

ryacii · Accepted Answer · 2015-05-26 01:04:03Z

0

var filter_options = [];

$('.form-filters input:checkbox').click(function() {
	filter_options = [];
	$('.form-filters input:checkbox').each(function(idx, obj) {
        if($(obj).is(":checked"))
            filter_options.push($(obj).val());
    });
	$('#result').html(filter_options.join('; '));
	console.log(filter_options);
	
});

answered May 26, 2015 at 1:04

ryacii

5274 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding and removing checkbox values to an array not working

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related