如何将键、值对添加到 jQuery 数组？

Question

我有一组复选框，我想将它们包含一对数字的值添加到数组中，然后使用它们。问题是数组只取最后一个复选框的值。我挣扎了很多，但无法弄清楚。

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);
  });
});

Answer 1

您使用第一个数字作为索引，即20，这就是您只能在数组中获取一个元素的原因。

It 元素 firstoptoins[20] 在每个循环中都被替换。

你可以这样做：

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);

这将导致：

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

---

第二个循环是：

$.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]);
});

第一个号码使用v[0]，第二个号码使用v[1]