Iterated over a checkbox and displaying a user's input in App Studio

Question

I'm trying to take a user's input from a checkbox in AppStudio, storing it in a list, and then displaying that list. However, when I run this code the chosenFoods list is blank.

var checkboxFoodChoices = ["mexican", "italian", "chinese", "american", "brazilian", "french"];
var chosenFoods = [];

button2.onclick=function(){
    for(var j = 0; j < checkboxFoodChoices.length; j++){
      if(checkbox1.getValue(j) == checkboxFoodChoices[j]){
            chosenFoods[j] = checkboxFoodChoices[j]
            
          } // if statement
      } //for loop
    console.log(chosenFoods)
} //onclick

I tried it a different way but the list then displays [empty, empty, chinese] if I chose the third value in the list instead of just [chinese]

var checkboxFoodChoices = ["mexican", "italian", "chinese", "american", "brazilian", "french"];
var chosenFoods = [];

button2.onclick=function(){
    for(var j = 0; j < checkboxFoodChoices.length; j++){
      if(checkbox1.getValue(j)){
            chosenFoods[j] = checkboxFoodChoices[j]
          } // if statement
      } //for loop
    console.log(chosenFoods)
} //onclick