Remove dynamically added variables from Javascript array

Question

I'm working on a project where I generate some checkboxes, with the value based on PHP variables, like this:

<input type="checkbox" value="<?php echo $example; ?>">

I then want to be able to grab the value of a clicked input and add it to a JS array, so that I can post all of the values from any checked checkboxes.

The values are adding to my JS array no problem, but when I try to remove them from the array I'm running into difficulties. If there is an individual element in the array then it will be removed fine, if there are more than that then my code only seems to remove the most recently added.

I think the problem is from the value_array.splice(index, 1); line.

$(document).on('click', '.example-input', function() {

    input = $(this).find('input');

    if(example_condition == true) {
        $(input).prop( 'checked', true );
        value = $(input).val();
        value_array.push(value);
        index = value_array.indexOf(value);
        is_checked = true;
    } else {
        $(input).prop('checked', false);
        is_checked = false;
    }

    if(is_checked == false) {
        if(index !== -1) {
            value_array.splice(index, 1);
        }
    }

    // Post JS array
});

Hopefully, someone can point me in the right direction here.

I've also tried implementing the answer that was given here: How do I remove a particular element from an array in JavaScript?, but it does not seem to work when there are multiple elements in the array.

Thanks.

`If there is an individual element in the array then it will be removed fine, if there are more than that then my code only seems to remove the most recently added.` How do you decide which one has to be removed ? I can't see the pattern in the way you `splice` variables in order to help you. — ZombieChowder, Jul 09 '18 at 15:38
What is example_condition? Extra close parenthesis on this line: if(example_condition == true)) { — Tom G, Jul 09 '18 at 15:38
@snack_overflow when unchecking a checkbox you need to get the value of the input like you do in the event a checkbox is checked, use that value to then find the correct index of the value in the array, then splice at that index. — Ryan Wilson, Jul 09 '18 at 15:39
The only thing I see wrong with the splice line is that maybe `index` is not `-1` but `undefined` because `example_condition == true` is false and the error mentioned by @TomG — lealceldeiro, Jul 09 '18 at 15:39
@RyanWilson - Perfect! Thank you, It didn't occur to me that I would need to re-check my value/index. This solution works great for me. — snack_overflow, Jul 09 '18 at 15:48
@snack_overflow Cool. Glad that worked for you. Have a good day!! :) — Ryan Wilson, Jul 09 '18 at 15:50

score 1 · Accepted Answer · answered Jul 09 '18 at 15:43

Here's how I would tackle this: create a function that iterates over the checked boxes and adds to the array, call it when the page loads and when anything changes

var value_array;
$(document).ready(function() {
   updateValueArray();
   $(document).on('change', '.myCheck', function() {
      updateValueArray();
      console.log(value_array);
  });
});


function updateValueArray() {
  value_array = [];
  $('.myCheck:checked').each(function() {
      value_array.push($(this).attr("value"));
  });
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  </head>
  <body>
     <input class="myCheck" type="checkbox" value="1">
     <input class="myCheck" type="checkbox" value="2">
     <input class="myCheck" type="checkbox" value="3">
     <input class="myCheck" type="checkbox" value="4">
     <input class="myCheck" type="checkbox" value="5">
     <input class="myCheck" type="checkbox" value="6">
     <input class="myCheck" type="checkbox" value="7">
  </body>
</html>

Remove dynamically added variables from Javascript array

1 Answers1