javascript - 循环检查复选框并创建多维数组

Question

我有一系列复选框、餐食和产品。我能够检查每一项并找到名称和值。我想做但无法做的是创建一个数组，数组索引将是复选框的名称，值将是选中的复选框的值。

$("#recipe-filter-form").submit(function(e) {
    e.preventDefault();

    var categories = [];
    var i = 0;

    $('.category-checkbox').each(function (index, value) {
        var checkboxName = $(this).attr('name');
        var checkboxValue = $(this).val();

        // if checkbox is checked
        if ($(this).is(':checked'))
        {
            categories[checkboxName][i] = checkboxValue;
            i++;
        }

    });

    console.log(categories);
});

此循环遍历每个复选框，如果选中，则获取名称和值。

我向数组添加了一个索引 i，希望它能正常工作，但它返回一个错误:TypeError: Cannot set property '0' of undefined

HTML

<form action="" method="get" id="recipe-filter-form">
    <ul>
        <li>
            <label class="check" data-category="appetizers">
            <input type="checkbox" name="meal" value="appetizers" class="category-checkbox"> Appetizers</label>
        </li>
        <li>
            <label class="check" data-category="beverages">
            <input type="checkbox" name="meal" value="beverages" class="category-checkbox"> Beverages</label>
        </li>
    </ul>

    <ul>
        <li>
            <label class="check" data-category="sides">
            <input type="checkbox" name="products" value="sides" class="category-checkbox"> Sides</label>
        </li>
        <li>
            <label class="check" data-category="soups">
            <input type="checkbox" name="products" value="soups" class="category-checkbox"> Soups</label>
        </li>
    </ul>

    <button type="submit" class="button green secondary">Filter</button>
</form>

如果每个复选框都被选中，我的预期输出是:

array('meal' => array('appetizers', beverages'), 'products' => array('sides', 'soups')

为什么要创建多维数组？

因为创建数组后，我将通过附加数组索引来循环遍历数组来生成一个字符串，字符串的值如下所示:

meal=appetizers,beverages&products=sides,soups

问题:如何更改代码以获得如上行所示的预期输出？

Answer 1

我相信您发布的代码存在问题。

1. categories[checkboxName][i] 这里 categories[checkboxName] 在第一次尝试中未定义。所以会导致错误。

不需要

2. i。只需使用push()即可。

您可以使用categories[checkboxName] =categories[checkboxName] || []; 如果变量在循环中未定义，则将其初始化为数组。

$("#recipe-filter-form").submit(function(e) {
  e.preventDefault();
  var categories = [];
  $('.category-checkbox').each(function(index, value) {
    var checkboxName = this.name;
    var checkboxValue = this.value;
    // if checkbox is checked
    if ($(this).is(':checked')) {
      categories[checkboxName] = categories[checkboxName] || []; //initialize if not exist
      categories[checkboxName].push(checkboxValue);
    }
  });

  console.log(categories);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form action="" method="get" id="recipe-filter-form">
  <ul>
    <li>
      <label class="check" data-category="appetizers">
        <input type="checkbox" name="meal" value="appetizers" class="category-checkbox">Appetizers</label>
    </li>
    <li>
      <label class="check" data-category="beverages">
        <input type="checkbox" name="meal" value="beverages" class="category-checkbox">Beverages</label>
    </li>
  </ul>

  <ul>
    <li>
      <label class="check" data-category="sides">
        <input type="checkbox" name="products" value="sides" class="category-checkbox">Sides</label>
    </li>
    <li>
      <label class="check" data-category="soups">
        <input type="checkbox" name="products" value="soups" class="category-checkbox">Soups</label>
    </li>
  </ul>

  <button type="submit" class="button green secondary">Filter</button>
</form>