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
– ZombieChowder, Commented Jul 9, 2018 at 15:38
What is example_condition? Extra close parenthesis on this line: if(example_condition == true)) { — Tom G
– Tom G, Commented Jul 9, 2018 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
– Ryan Wilson, Commented Jul 9, 2018 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
– lealceldeiro, Commented Jul 9, 2018 at 15:39
@snack_overflow Cool. Glad that worked for you. Have a good day!! :) — Ryan Wilson
– Ryan Wilson, Commented Jul 9, 2018 at 15:50

Tom G · Accepted Answer · 2018-07-09 15:43:04Z

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>

Collectives™ on Stack Overflow

Remove dynamically added variables from Javascript array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related