jQuery convert checkbox selections to array

Question

I have an HTML like this:

<div class="pgggo-list-taxon">
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
    </li>
    <li>
        <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
    </li>
</div>

Each checkbox has unique name = pgggo-category-sep-56, pgggo-category-sep-14. As multiple items are clicked the ids are added to the id field of below array.

I am trying to have a method which gives me an array as output:

$output = array(
   array(
     'taxonomy'=> 'category', // pgggo-category-sep-56 --category word is pulled from here
     'id'=> array(56,14), // ids are pulled pgggo-category-sep-56 number at the end
    )
   array(
     'taxonomy'=> 'home', // pgggo-home-sep-56 --homeword is pulled from here
     'id'=> array(56,14), // ids are pulled pgggo-category-sep-56 number at the end
    )
);

I tried this:

$('.pgggo-container-ajax-sorting').on('click', '.pgggo-list-taxon input', function(event) {
   var outputPgggo = $(this).attr('name');
}

But this only pulls the string. Is there any way to get this done?

Do you want the ids to be added in both arrays: in the first one category and in the second one home? — Ivan
– Ivan, Commented Jan 3, 2020 at 12:13
@Ivan Hi, no actually the number corresponding the home becomes the id of it 's array — GeekyOwl
– GeekyOwl, Commented Jan 3, 2020 at 12:18
Oh ok, I was missing something because there are only category type checkboxes in your html snippet. — Ivan
– Ivan, Commented Jan 3, 2020 at 12:23
@AmitSharma yes Php will be also okay but I will need to pass the data from the selection which I think the only way is to get using jquery. I am using it in ajax function. so there is action available to process it with php — GeekyOwl
– GeekyOwl, Commented Jan 3, 2020 at 12:28

Ivan · Accepted Answer · 2020-01-03 14:53:55Z

I would recommend storing the ids in an object instead of having an array of array. It's easier to work with. Something like this:

const array = {
  category: [],
  home: [],
};

Then, you can always transform into the desired form with some array manipulation:

Object.entries(array).map(([taxomony, id]) => ({taxomony, id}))

Here is the code to update the object when a checkbox is clicked:

const array = {};

$('[name^="pgggo-"]').on('click', function() {
  const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
  const id = attr.split('[')[0];
  const checked = $(this).prop('checked');
  
  array[taxonomy] = array[taxonomy] || [];
  const index = array[taxonomy].indexOf(id);
  index == -1 ? array[taxonomy].push(id) : array[taxonomy].splice(index, 1);
  
  console.log(array);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pgggo-list-taxon">
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (category)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-home-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (home)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
  </li>
</div>

Or, instead of having to go through the trouble of handling duplicates and states. You can construct the array only when you need to use it:

$('.sort-button').on('click', function() {

  const array = {};
  $('[name^="pgggo-"]').filter(':checked').each(function() {
    const [_, taxonomy, __, attr] = $(this).attr('name').split('-');
    array[taxonomy] = array[taxonomy] || [];
    array[taxonomy].push(attr.split('[')[0]);
  });
  
  console.log(array);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="pgggo-list-taxon">
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-56[]">
            <div class="icon-box">
                <div name="development">Development</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (category)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-home-sep-14[]">
            <div class="icon-box">
                <div name="food">Food (home)</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-8[]">
            <div class="icon-box">
                <div name="medical">Medical</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-1[]">
            <div class="icon-box">
                <div name="uncategorized">Uncategorized</div>
            </div>
        </label>
  </li>
  <li>
    <label>
            <input type="checkbox" name="pgggo-category-sep-2[]">
            <div class="icon-box">
                <div name="wordpress">WordPress</div>
            </div>
        </label>
  </li>
</div>

<button class="sort-button">Show!</button> <!-- for demo purposes -->

while implementing I am caught up with some problems. because the taxonomy is dynamic it will not be fixed one ..it can be the category, home or something else. Also, the slice is done 2 positions ..there might also have a case for more than 2 or maybe 1. any possible solution
@GeekyOwl, I have updated my answer so that (1) the object is filled dynamically ; (2) there are no duplicates ; (3) unchecking removes the item from the array.
No problem @GeekyOwl, I've added a second version below the initial one, I think you will find it useful.

Mischa · Accepted Answer · 2020-01-03 12:46:51Z

You want to store/send the selected values in one array, right? So why you use unique names then for each checkbox?! ... if they belong together then name them appropriately like so:

    <input type="checkbox" name="pgggo-category-sep[]" value="56">
    <input type="checkbox" name="pgggo-category-sep[]" value="14">
    <input type="checkbox" name="pgggo-category-sep[]" value="8">
    <input type="checkbox" name="pgggo-category-sep[]" value="1">
    <input type="checkbox" name="pgggo-category-sep[]" value="2">

    <input type="checkbox" name="pgggo-home-sep[]" value="foo">
    <input type="checkbox" name="pgggo-home-sep[]" value="bar">
    //....

Then they will be sent as an array on submit automatically, no further rearrangement needed ... or if you really want to do it the ajax way still, you can easily get all the ids for the category-checkboxes like so:

    $('[name="pgggo-category-sep[]"]').on('change', function () {
      let values = Array.from($('[name="pgggo-category-sep[]"]:checked'))
        .map(elem => $(elem).val())
    })

Collectives™ on Stack Overflow

jQuery convert checkbox selections to array

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related