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

Looping thru checked checkboxes and creating multi dimensional array

本文关键字：创建 数组 复选框 循环      更新时间：2024-05-05

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

$("#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:无法设置未定义的属性"0"

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

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

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

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

  2. 不需要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>

相关文章：