javascript/jquery: how to add/remove variables from array depending on whether a checkbox is selected

Question

I'm outputting order addresses for a takeout restaurant: each individual order is output as a table, each table has a checkbox. I want to put the addresses into an array when the .ordercollected checkbox is ticked, and remove it from the array if it is unticked.

At the moment, rather than appending each new address I get each order address on its own in the array, which updates each time I tick the .ordercollected checkbox.

Really new to programming so any help appreciated!

//get the addresses from selected tables
$('.ordercollected').change(function() {
    var activeaddress = [];
    //loop through checkboxes with class .ordercollected
    $(this).each(function() {
        //if checkbox is ticked
        if ($(this).is(':checked')) {
            //get address from table
            var address = $(this).closest('.ordertable').find('.address').text();
            //append value of address into activeaddress array
            activeaddress.push(address);
        };
    });
    console.log('active address: ', activeaddress);
});

edit to add in the tables I am creating:

   <table class="ordertable">
      <tr>
        <td>
          <p>Order #
            <?php echo $order_id; ?> &mdash;
              <time datetime="<?php the_time('c'); ?>">
                <?php echo the_time('d/m/Y g:i:s A'); ?>
              </time>
          </p>
        </td>          
        <td>
         <?php echo $order->billing_first_name . ' ' . $order->billing_last_name ?>
        </td>
        <td>
          <?php if ($order->billing_phone) : ?>
            <a href="tel:<?php echo $order->billing_phone; ?>">Tel.</a>
            <?php endif; ?>
        </td>
        <td>
        <p class="address"><?php echo $order->shipping_address_1 . ' ' . $order->shipping_postcode ?></p>
        <td/>
        <td>
        <a class="maps-activate" href="#">Open in Maps</a> 
        </td>
        <td>
          <form action="">
            <input type="checkbox" class="ordercollected" value="0" />
          </form>
        </td>
      </tr>
    </table>

Answer 1

Rather than remake your entire activeaddress array every time a checkbox changes, the best thing to do here would be to add or remove only the selected address when a checkbox changes. To do this activeaddress will have to be available outside of that function. I also think it will be cleaner if you use a JS object instead of an array.

var activeaddress = {};

$('.ordercollected').change(function() {
    // get table id
    var orderTableID = $(this).closest('.ordertable').attr('id');
    // if checkbox is ticked
    if($(this).is(':checked')) {
        // get address from table
        var address = $(this).closest('.ordertable').find('.address').text();
        // append value of address into activeaddress object
        activeaddress[orderTableID] = address;
    } else {  // checkbox is NOT ticked
        // remove address from object
        delete activeaddress[orderTableID];
    }
    console.log("active address: ", activeaddress); 
});

As you can see, this code assumes that each table with class .ordertable has a unique id that can be used as the key in the activeaddress object. This is better than looping over the entire array/object each time because, especially if you have a very big set of orders. If you had included your HTML I would be able to help more, but as the question is this is as far as I can help. Let me know if you have any follow up questions.

A couple of things to note:

• Using pascalCase for variable names and class names makes code more readable (e.g. activeAddress instead of activeaddress)
• In my opinion, using an object instead of an array is a better way to add and remove a specific item
• When asking question on SO, please give as much information as possible, such as including your HTML

Finally some links:

• Adding a key value pair to an object
• Removing a key value pair from an object

Answer 2

try something like this?

HTML:

<input type="checkbox" class="ordercollected" value="apple" />
<input type="checkbox" class="ordercollected" value="mango" />

JS

    $('.ordercollected').change(function() {
    var activeaddress = [];
    //loop through checkboxes with class .ordercollected
    if (this.checked) {
        activeaddress.push(this.value);            
    }
    else {
        var index = activeaddress.indexOf(this.value);
        if (index > -1) {
            activeaddress.splice(index, 1);
        }
    }
    console.log('active address: ', activeaddress);
});