Jquery create arrays inside an array

Question

I have two sets of checkboxes like so:

<ul id="searchFilter">
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="1">Toronto</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="3">New York</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="6">London</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="5">Paris</li>
    <li class="">
        <input type="checkbox" name="location[]" class="cb_location" value="4">Berlin</li>
</ul>

        <ul id="searchFilter">
                    <li><input type="checkbox" name="price[]" class="cb_price" value="2"> $200,000 to $299,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="3"> $300,000 to $399,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="4"> $400,000 to $499,999</li>
                    <li><input type="checkbox" name="price[]" class="cb_price" value="5"> $500,000+</li>
                </ul>

and I have this jquery code that takes the value of what is selected and puts into an opts array:

$(':checkbox').change(function() {
   var opts = $(":checkbox:checked").map(function() {
        return $(this).val();
    }).get(); 
    console.log(opts);
});

but this will return the values of checked checkboxes values, regardless of which set of checkboxes they are in, my question is how would I keep these separate, but in the opts array, I am looking for these results:

[location[1, 2, 3], price[1, 2, 3]]

here is a fiddle: http://jsfiddle.net/6zz5f/1/

Arrays can't look like that. Do you mean you want an object? {location:[1,2,3], price:[4,5,6]} — Blazemonger
– Blazemonger, Commented Jul 17, 2014 at 15:06

Blazemonger · Accepted Answer · 2014-07-17 15:09:24Z

0

To create a complex object like that, you'll need to build it explicitly:

$(':checkbox').change(function () {
    var opts = {};
    $(":checkbox:checked").each(function () {
        var name = this.name;
        if (!opts[name]) opts[name] = [];
        opts[name].push(this.value);
    });
    console.log(opts);
});

http://jsfiddle.net/mblase75/Ttv3y/

The result will be something like:

{ location[]: [1,2,3], price[]: [4,5,6] }

You can remove the [] from the checkbox names inside the loop if you need to:

var name = this.name.substring(0,this.name.length-2);

answered Jul 17, 2014 at 15:09

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

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

2 Comments

Alnitak Over a year ago

NB: this won't produce a key for a set of checkboxes that has no option checked.

Blazemonger Over a year ago

@Alnitak OP didn't ask for that. "The values of checked checkboxes values", not the names of unchecked ones. Still, it's easily added.

Alnitak · Accepted Answer · 2014-07-17 15:08:20Z

If the set of checkboxes is small enough, and known in advance, just evaluate each of them separately:

function getValues(selector) {
    var $checked = $(':checkbox:checked');
    if (selector) {
        $checked = $checked.filter(selector);
    }

    return $checked.map(function() {
        return this.value;
    }).get();
};

$(':checked').on('change', function() {
    console.log({
        location: getValues('.cb_location'),
        price: getValues('.cb_price');
    });
});

Collectives™ on Stack Overflow

Jquery create arrays inside an array

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related