Dynamically construct array based on user input - Javascript/jQuery

Question

Hi,

I have a list of US regions set up as checkboxes. When a user submits the form, I need an array of associated states. This array is used for comparing to another array in my SQL tables.

Using jQuery or javascript, what's the best way to go about this?

I've got the general idea I believe:

        //populate region to state arrays here

        $("input[name='region']").each(function () {
            if ($(this).is(':checked')) {

            // ADD TO SUPER ARRAY OF ALL REGIONS
            // (this is where I need help)

            }
        });

Thanks in advance!!

PS. I tried using the input values var regionValue = $(this).attr('value') to identify each array, but I'm having issues with dynamically named arrays since all my functions are in static classes.

Answer 1

Edited to reflect the new information and incorporating GenericTypeTea's comment:

Assuming the ID of each checkbox is set to the region name, how about:

var regionStates = {};
regionStates['northeast'] = ['AB', 'CD', 'EF'];
regionStates['mountains'] = ['GH', 'IJ', 'KL'];
// etc...

var selectedStates = [];
$("input[name='region']:checked").each(function () {
    var region = regionStates[this.id];
    for (var i = 0; i < region.length; ++i) {
        selectedStates[selectedStates.length] = region[i];
    }
});

Using this, selectedStates will contain all the states of all regions that are selected.

Apologies for not knowing any real US state abbreviations.