Grouping in arrays with jQuery

Question

how can I make the data-kategori and data-secim attributes of the input: checked element on a page like this:

url=/?kategori=1-2-3&bolum=4

I got the list of categories but I can not match the data-selection of this categori list

$(function() {
  $("input").click(function() {
    var kategori = [];
    var a = "";

    $("input:checked[data-kategori]").each(
      function() {
        a = $(this).attr("data-kategori"),
          b = $.inArray(a, kategori)
        if (b == -1) {
          kategori.push(a);
        }
      });

    console.log(kategori);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p><input type="checkbox" data-kategori="kategori" data-secim="1" id="scrum" /> <label for="scrum">scrum</label> </p>
<p><input type="checkbox" data-kategori="kategori" data-secim="2" id="crystal" /><label for="crystal">kristal</label> </p>
<p><input type="checkbox" data-kategori="kategori" data-secim="3" id="xp" /><label for="xp">xp</label> </p>
<p><input type="checkbox" data-kategori="bolum" data-secim="4" id="ayna" /><label for="win">win</label> </p>

can you explain how to group and select the selected checkboxes on the page — huluslu, Apr 20 '18 at 15:00
@mplungjan unless I'm reading this question wrong, he's not trying to read a query string. he's trying to *make* one. contrary to the duplicate post this question was closed for. — Taplar, Apr 20 '18 at 15:02
I read he wants to check the checkboxes that are in the query string. "_can you explain how to group and select the selected checkboxes on the page_" Anyway, I reopened and copy the example here: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — mplungjan, Apr 20 '18 at 15:03

score 0 · Accepted Answer · answered Apr 20 '18 at 15:04

When an element is clicked, this logic will find all the selected checkboxes and put them into a map of kategori: [values]. It then takes that object and builds a string for each key in the object, joining the values by dash.

$(function() {
  var $kategori = $('input[data-kategori]');
  
  $kategori.on('click', function(){
    var x = $kategori.filter(':checked').get().reduce(function(results, element){
      if (results[element.dataset.kategori] === undefined) results[element.dataset.kategori] = [];
      
      results[element.dataset.kategori].push(element.dataset.secim);
      return results;
    }, {});
    
    console.log(
      Object.keys(x).map(function(key){
        return `${key}=${x[key].join('-')}`;
      }).join('&')
    );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p><input type="checkbox" data-kategori="kategori" data-secim="1" id="scrum" /> <label for="scrum">scrum</label> </p>
<p><input type="checkbox" data-kategori="kategori" data-secim="2" id="crystal" /><label for="crystal">kristal</label> </p>
<p><input type="checkbox" data-kategori="kategori" data-secim="3" id="xp" /><label for="xp">xp</label> </p>
<p><input type="checkbox" data-kategori="bolum" data-secim="4" id="ayna" /><label for="win">win</label> </p>

Grouping in arrays with jQuery

1 Answers1