通过选中的复选框循环并创建多维数组答案

【问题标题】：Looping thru checked checkboxes and creating multi dimensional array通过选中的复选框循环并创建多维数组
【发布时间】：2016-04-11 15:21:28
【问题描述】：

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

$("#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

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

【问题讨论】：

标签： javascript jquery arrays checkbox

【解决方案1】：

我相信您在发布的代码中遇到了问题。

categories[checkboxName][i] 这里categories[checkboxName] 在第一次尝试中未定义。所以会报错。
i 不需要。只需使用 push()。

如果循环中为undefined，则可以使用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>

【讨论】：