Создание многомерного объекта значений формы с использованием циклов

Question

У меня есть эта форма, которая вычисляет значение переключателя и количество переключателей. Я хочу l oop имя и значение каждого отмеченного или выбранного элемента в массиве многомерных объектов. Я использую функцию storeArray, чтобы сделать это, но все, что я мог сделать, это tab = {Apple: 1, Orange: 2, quantity: 7}

Но я хочу иметь возможность сделать что-то вроде этого .. tab = {name: Apple, value: 1,}{name:Orange, value: 2}{name: quantity, value: 7}. Я старался изо всех сил, я думаю, я не делаю это правильно.

function storeArray() {
  var tab = {};

  $('*[data-in="num"]:checked,#quantity').each(function() {
    tab[$(this).attr('name')] = parseInt($(this).val());
  });
  console.log(tab);
  return tab;
}

function validate(s) {
  //This is how we check that at least a checkbox is checked
  /*if($("input:checkbox:not(:checked)").length == $('input[type=checkbox]').length){
 $('#totalcost,#checkedcount').val(0);
  } else {*/
  $('#checkedcount').val(s);
  $('#totalcost').val((parseInt($('#quantity').val()) * s));
  $('#totalcount').val($('#quantity').val());
  //}
}

$('*[data-in="num"],#quantity').on('change', function() {
  var sum = 0;
  $('[data-in="num"]:checked').each(function() {
    sum += parseInt($(this).val());
  });
  validate(sum);
  myArray = storeArray();

  //myArray Object containing all input values
  //console.log(myArray);
  //This is how get the quantity for example
  //console.log(myArray['quantity']);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div id="CheckBoxList">
    <label><input type="checkbox" id='game0' value="1" name="Apple" data-d="b" data-in="num">Apple</label>
    <label><input type="checkbox" id='game1' value="2" name="Orange" data-d="b" data-in="num">Orange</label>
    <label><input type="checkbox" id='game2' value="3" name="Pineaple" data-d="b" data-in="num">Pineaple</label>
    <label><input type="checkbox" id='game3' value="4" name="Lemon" data-d="b" data-in="num">Lemon</label>
    <label><input type="checkbox" id='game4' value="5" name="Mango" data-d="b" data-in="num">Mango</label>
  </div>
  <div id="RadioButtonList">
    <label><input type="radio" id='pad' value="6" data-d="b" name="HI" data-in="num">Small Cup</label>
    <label><input type="radio" id='pad1' value="7" data-d="b" name="HI" data-in="num">Medium Cup</label>
    <label><input type="radio" id='pad2' value="8" data-d="b" name="HI" data-in="num">Big Cup</label>
  </div>
  <div id="SelectOptions">
    <select name="quantity" id="quantity" data-d="b">
      <option value="0">Select quantity</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
  <code id="demo"></code>
  total cost<input type="text" id="totalcost" value="">
  <br>total Checked<input type="text" id="checkedcount" value="">
  <br>total boxes<input type="text" id="totalcount" value="">
  <!-- partial -->
</form>

Answer 1

Попробуйте с этим кодом:

function storeArray() {
  var tab = [];

  $('*[data-in="num"]:checked,#quantity').each(function(index) {
    tab[index] = {
         name: $(this).attr('name'),
         value: parseInt($(this).val())
  });

  return tab;
}