How to add pairs of key, value to jQuery array?

Question

I have a group of checkboxes and I want to add their values which contains a pair of numbers to an array, then use them. The problem is array takes only value of last checkbox. I struggled a lot but couldn't figure it out.

https://jsfiddle.net/zfwbtomu/

HTML:

<div class="scrolly-option" id="input-option20">
    <div>
        <label>
            <input type="checkbox" name="option[20][]" value="20,64">
            <span>Mint</span> </label>
    </div>
    <div>
        <label>
            <input type="checkbox" name="option[20][]" value="20,63">
            <span>Maroon</span> </label>
    </div>
    <div>
        <label>
            <input type="checkbox" name="option[20][]" value="20,62">
            <span>Ecru</span> </label>
    </div>
</div>
<input type="checkbox" class="option1" name="" value="" />
<div class="result"></div>
<button type="button" class="button-cart">ADD</button>

JS:

$('.button-cart').on('click', function(e) {
  e.preventDefault;
  var firstoptoins = [];
  $(".scrolly-option input[type=checkbox]").each(function () {
    if ($(this).prop('checked')) {
      var arr = $(this).val().split(',');
      firstoptoins[arr[0]] = arr[1];
    }
  });

  console.log(firstoptoins);

  $('.scrolly-option .checkbox input[type=checkbox]').prop("checked", false);

  $.each(firstoptoins, function (o, v) {
    $('.option1').attr("name", 'option[' + o + '][]');
    $('.option1').attr("value", v);
    $('.option1').prop('checked', true);
    console.log('o: ' + o + ' v: ' + v);
  });
});

How do you want your array to format? You are using 20 as index to all of the element on the array and that is the reason why you are only getting the last value. — Eddie
– Eddie, Commented Dec 10, 2017 at 12:34
yeah @Eddie is right there you are using the first value as index for the firstoptions array so all values will be copied to same index — Muhammad Omer Aslam
– Muhammad Omer Aslam, Commented Dec 10, 2017 at 12:45

Eddie · Accepted Answer · 2017-12-10 12:57:54Z

1

You are using the first number as an index which is 20 that is the reason why you are only getting one element on your array.

It element firstoptoins[20] is getting replaced on each and every loop.

You can do something like:

var firstoptoins = [];

$(".scrolly-option input[type=checkbox]").each(function () {
        if ($(this).prop('checked')) {
            var arr = $(this).val().split(',');
            firstoptoins.push( [ arr[0], arr[1] ] );
        }
});

console.log(firstoptoins);

this will result to:

[ 
    [ "20", "64" ],
    [ "20", "63" ],
    [ "20", "62" ] 
]

The second loop will be:

$.each(firstoptoins, function (o, v) {
    $('.option1').attr("name", 'option[' + v[0] + '][]');
    $('.option1').attr("value", v[1]);
    $('.option1').prop('checked', true);
    console.log('o: ' + v[0] + ' v: ' + v[1]);
});

Use v[0] for the first number and v[1] for the second number

edited Dec 10, 2017 at 12:57

answered Dec 10, 2017 at 12:39

Eddie

26.8k6 gold badges39 silver badges59 bronze badges

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

9 Comments

Kardo Over a year ago

Thanks a lot for the answer. I'd appreciate if you also tell me how to iterate between array items. The output of array is like this: (3) [Array(2), Array(2), Array(2)] 0 : (2) ["54", "175"] 1 : (2) ["54", "174"] 2 : (2) ["54", "173"]

Eddie Over a year ago

@Kardo The example you gave is not the same value on your input checkbox, the values are 20,64,20,63 and 20,62 ,

Eddie Over a year ago

Im not sure but I think, my example above has the same format with 0 : (2) ["54", "175"] 1 : (2) ["54", "174"] 2 : (2) ["54", "173"]

Kardo Over a year ago

Sorry, I was trying another product: (3) [Array(2), Array(2), Array(2)] 0 : (2) ["20", "64"] 1 : (2) ["20", "63"] 2 : (2) ["20", "62"]

Kardo Over a year ago

Thanks a million! You saved me!

|

Collectives™ on Stack Overflow

How to add pairs of key, value to jQuery array?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related