CODEWITHSUNDEEP
javascriptjquery
soum
soum

Reputation: 1159

Grouping checkbox selections

I have a series of check boxes and I am trying to group the selections by their name and store the selection as a collection. So the final output that I am after is something like this

{
'E113': [{'id':'sxk1', value: '19'}, {'id':'sxk22', value: '29'}],
'E013': [{'id':'kxk1', value: '22'}, {'id':'sxk3', value: '15'}]
}

In reality its not happening that way. Its adding "" around those arrays and if I am selecting only one checkbox it is not wrapping it in an array.

Here is my JS

$(".checkbox").click(function() {

      var selectionForm = JSON.stringify($('#form').serializeObject())
      console.log(selectionForm)

    })

$.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

and here is my fiddle

https://jsfiddle.net/sghoush1/xLxezzLz/1/

Here is how I have my markup

<form id="form">

<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk1', value: '19'}"/>
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk22', value: '29'}"/>
<input type="checkbox" class="checkbox" name="E013" value="{'id':'kxk1', value: '22'}"/>
<input type="checkbox" class="checkbox" name="E013" value="{'id':'sxk3', value: '15'}"/>

</form>

Upvotes: 0

Views: 75

Answers (2)

chrki
chrki

Reputation: 6323

The JSON you wrote uses single quotes ' which is invalid, you should use double quotes " instead. Your value also needs quotes.

<input type="checkbox" class="checkbox" name="E113" value='{"id":"sxk1", "value": "19"}'/>
<input type="checkbox" class="checkbox" name="E113" value='{"id":"sxk22", "value": "29"}'/>
<input type="checkbox" class="checkbox" name="E013" value='{"id":"kxk1", "value": "22"}'/>
<input type="checkbox" class="checkbox" name="E013" value='{"id":"sxk3", "value": "15"}'/>

Then when appending/pushing data to existing arrays use JSON.parse to retrieve a Javascript object instead of a text string: JSON.parse(this.value)

Fixed fiddle: https://jsfiddle.net/rs108uLm/

Upvotes: 2

Daniel Beck
Daniel Beck

Reputation: 21485

$('.checkbox').on('click', function() {

  var o = {};
  $('.checkbox:checked').each(function() {
    var n = $(this).attr("name"),
      // Convert your value into valid JSON (otherwise we'd have to use eval, which, no):
      v = $(this).val().replace(/\'/g,'"').replace(/value:/,'"value":');
   
    if (o[n]) {
      o[n].push(JSON.parse(v));
    } else {
      o[n] = [JSON.parse(v)];
    }
  });
  $('.output').html(JSON.stringify(o));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk1', value: '19'}" />
<input type="checkbox" class="checkbox" name="E113" value="{'id':'sxk22', value: '29'}" />
<input type="checkbox" class="checkbox" name="E013" value="{'id':'kxk1', value: '22'}" />
<input type="checkbox" class="checkbox" name="E013" value="{'id':'sxk3', value: '15'}" />

<div class="output"></div>

You could avoid some of those regular expressions if you cleaned up your input data (use valid JSON instead of a mixture of quoted and unquoted fields.) The rest is pretty straightforward, I assume self-explanatory.

Upvotes: 1

Related Questions