Looping through checkboxes und erstellen multidimensionalen Array

Question

Ich habe eine Reihe von Kontrollkästchen, Mahlzeiten und Produkte. Ich bin in der Lage, jeden einzelnen zu überprüfen und den Namen und den Wert zu finden. Was ich tun möchte und kann, ist ein Array zu erstellen, der Array-Index wäre der Name des Kontrollkästchens und der Wert wäre der Wert des Kontrollkästchens, das aktiviert wurde.

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

Diese Schleife durch jedes Kontrollkästchen, wenn es aktiviert ist, erhalten Sie den Namen und Wert.

Ich habe einen Index i auf das Array in der Hoffnung, es funktioniert, aber es gibt einen Fehler zurück: Typeerror: kann nicht eingestellt Eigenschaft '0' undefinierter

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> 

Wenn jeder Checkbox aktiviert wurde , meine erwartete Ausgabe ist:

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

Warum möchte ich ein multidimensionales Array erstellen?

Da nach dem Array erstellt wird, werde ich durch Anhängen des Array-Index eine Zeichenfolge durch Looping durch das Array erzeugen, Werte für eine Zeichenfolge aussehen:

meal=appetizers,beverages&products=sides,soups 

Frage: Wie verändern ich meinen Code um die erwartete Ausgabe wie in der Zeile oben zu sehen?

Answer 1

Ich glaube, Sie hatten Probleme mit dem Code, den Sie gepostet haben.

1. categories[checkboxName][i] hier categories[checkboxName] im ersten Versuch nicht definiert. Es wird also einen Fehler verursachen.

2. i wird nicht benötigt. Benutze einfach push().

können categories[checkboxName] = categories[checkboxName] || []; verwenden, um die Variable als ein Array zu initialisieren, wenn sie undefined in der Schleife ist.

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