チェックボックスをチェックして多次元配列を作成する

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：プロパティを設定することはできませんが「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 

質問：どのように私は私のコードを変更しません上記の行に見られるように期待される出力を得るには？

Answer 1

投稿したコードに問題があると思います。

ここ

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>