jQuery get complex multiple checked values from checkbox to array

Question

I want to dynamically display the content of a site in relation to choice of visitors when it selects checkbox. No problem for sends information in Ajax and the php side. But I can not create an array like I want in jQuery.

HTML :

<div id="filter">
    <div class="sizes">
        <input type="checkbox" data-group="size_catalog" data-value="32">
        <input type="checkbox" data-group="size_catalog" data-value="36">
        <input type="checkbox" data-group="size_catalog" data-value="38">
        <input type="checkbox" data-group="size_catalog" data-value="40">
    </div>
    <div class="colors">
        <input type="checkbox" data-group="color_catalog" data-value="red">
        <input type="checkbox" data-group="color_catalog" data-value="blue">
        <input type="checkbox" data-group="color_catalog" data-value="black">
    </div>
</div>

The object with multiple array I would like to have (it is necessary to group the same data-group) :

var myArray = {size_catalog : ["32", "36", "38"], color_catalog: [red, blue]};

My current code (found on the internet and adapted) that create a simple array:

    function getChecked(){
        var opts= [];
        $checkboxes.each(function(){
            if(this.checked){
                opts.push(this.value);
            }
        });
        return opts;
    }

    function updateSearch(opts){
        $.ajax({
            type: "POST",
            url: "class.search.php",
            dataType : 'json',
            cache: false,
            data: {filterOpts: opts},
            success: function(records){
                ...
            }
        });
    }

    var $checkboxes = $("input:checkbox");
    $checkboxes.on("change", function(){
        var opts = getChecked();
        updateSearch(opts);
    });

    updateSearch();

Thank you for your help!

@A.Wolff I know there are no multidimensional array in javascript. It is for this reason that I put quotation marks. but you're right. I will correct — user3271227
– user3271227, Commented Jan 2, 2015 at 16:03

Bjorn · Accepted Answer · 2015-01-04 16:00:41Z

2

You do that by iterating and creating an object with the size-catalog as keys, and an array you push to as a value.

var $checkboxes = $("input:checkbox");

$checkboxes.on('change', function() {
    var obj = {};

    $checkboxes.filter(':checked').each(function() {
        var n = $(this).data('group'),
            v = $(this).data('value');

        n in obj ? obj[n].push( v ) : obj[n] = [v];
    });

    $.post('class.search.php', {filterOpts: obj}, 'json').done(function(records) {

    });

});

FIDDLE

edited Jan 4, 2015 at 16:00

Bjorn

5,3521 gold badge27 silver badges35 bronze badges

answered Jan 2, 2015 at 15:15

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

user3271227 Over a year ago

Thank you very much! This community is really powerful.

user3271227 Over a year ago

I try to convert $.post to $.ajax for adding beforeSend with loading gif but it does not work. Did I make a mistake? $.ajax({ type: "POST", url: "ajax-search.php", dataType : 'json', data: {filterOpts: obj}, beforeSend: function(){ $('#displaycloth').text('Chargement...'); }, }) .done(function(records){ $('#displaycloth').html(records) });

musefan · Accepted Answer · 2015-01-02 15:16:02Z

0

Thats not a multidimentional array, thats an object containing 2 different arrays. If you want that, then something like this is what you want:

function getChecked() {
  var sizeArray = [];
  var colorArray = [];

  $checkboxes.each(function() {
    if ($(this).is(':checked')) {
      if ($(this).data('group') == 'size_catalog')
        sizeArray.push($(this).data('value'));
      else if ($(this).data('group') == 'color_catalog')
        colorArray.push($(this).data('value'));
    }
  });

  return {
    size_catalog: sizeArray,
    color_catalog: colorArray
  };
}

Here is a working example

answered Jan 2, 2015 at 15:16

musefan

48.5k21 gold badges144 silver badges193 bronze badges

1 Comment

user3271227 Over a year ago

Thank you for taking the time to answer me.

Collectives™ on Stack Overflow

jQuery get complex multiple checked values from checkbox to array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related