0

I have multiple checkboxes in a view and each one has some data attributes, example:

enter image description here

Once the button is clicked I'm iterating through all the checkboxes which are selected and what I want to do is get the data-price and value fields for each selected checkbox and create JSON array.

This is what I have so far:

var boxes2 = $("#modifiersDiv :checkbox:checked");
            var selectedModifiers = [];
            var modifierProperties = [];
            for (var i = 0; i < boxes2.length; i++) {

                for (var k = 0; k < boxes2[i].attributes.length; k++) {
                    var attrib = boxes2[i].attributes[k];
                    if (attrib.specified == true) {
                        if (attrib.name == 'value') {
                            modifierProperties[i] = attrib.value;
                            selectedModifiers[k] = modifierProperties[i];
                        }
                        if (attrib.name == 'data-price') {
                            modifierProperties[i] = attrib.value;
                            selectedModifiers[k] = modifierProperties[i];
                        }                 
                    }                    
                }
            }
            var jsonValueCol = JSON.stringify(selectedModifiers);

I'm not able to get the values for each checkbox and I'm able to get the values only for the first one and plus not in correct format, this is what I'm getting as JSON:

[null,"67739",null,"1"]

How can I get the correct data?

halfer
  • 19,824
  • 17
  • 99
  • 186
Laziale
  • 7,965
  • 46
  • 146
  • 262
  • A couple of good answers appeared just as I was setting up your original problem in jsfiddle at http://jsfiddle.net/Zp3gP/ You can use it to test their code. – Jay Blanchard Apr 15 '14 at 14:01

3 Answers3

1

if you want to get an object with all checked values, skip the JSON (which is just an array of objects) and make your own....

var checked =[];
var getValues = function(){
  $('.modifiers').each(function(post){
    if($(this).prop('checked')){
      checked.push({'data-price':$(this).attr('data-price'),'value':$(this).attr('value')});
    }
  });
}

getValues();

sure i'm missing something obvious here.. but mind is elsewhere

eskimomatt
  • 195
  • 9
1

You can use $.each to parse a jquery array, something like:

var jsonValueObj = [];
$("#modifiersDiv :checkbox:checked").each(function(){
  jsonValueObj.push({'value':$(this).val(),'data-price':$(this).attr('data-price')});
});
jsonValueCol = JSON.stringify(jsonValueObj);

Please note it's generally better to use val() than attr('value'). More information on this in threads like: What's the difference between jQuery .val() and .attr('value')?

As for your code, you only had one answer at most because you were overwriting the result every time you entered your loop(s). Otherwise it was okay (except the formatting but we're not sure what format you exactly want). Could please you provide an example of the result you would like to have?

Community
  • 1
  • 1
vdavid
  • 2,434
  • 1
  • 14
  • 15
0

This should give an array with values (integers) and prices (floats):

var selected = [];

$("#modifiersDiv :checkbox:checked").each(function()
{
    var val = parseInt($(this).val(), 10);
    var price = parseFloat($(this).data("price"));    
    selected.push(val);
    selected.push(price);
});

Edit: Updated answer after Laziale's comment. The $(this) was indeed not targeting the checked checkbox. Now it should target the checkbox.

ZiNNED
  • 2,620
  • 20
  • 31
  • 1
    $(this).val() is not good selector because it triggers the button properties which triggers the jquery function. @ZiNNED – Laziale Apr 15 '14 at 14:07
  • @Laziale You are right. I've updated the answer to reflect the changes needed to make it work. – ZiNNED Apr 15 '14 at 14:11