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：无法设置属性＆＃39; 0＆＃39;未定义的

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

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

categories[checkboxName][i]此处categories[checkboxName]在第一次尝试中未定义。所以它会导致错误。
i不需要。只需使用push（）。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: