Erreur lors de la gestion des tableaux

Décrivez ici votre problème ou ce que vous cherchez à faire.

//HTML
 <input type="checkbox" value="banane" class="checkbox">banane<br>
 <input type="checkbox" value="tomate" class="checkbox">tomate<br>
 <input type="checkbox" value="haricots" class="checkbox">haricots<br>
<button class="valider">Valider</button>
//Javascript
// je crée mon tableau
liste = [];
// Je récupère l'élément checkbox
var items = document.querySelectorAll(".checkbox");
// Je parcours mes checkboxs
for(var item of items){
// J'effectue un click sur chaque checkbox
item.addEventListener("click", function(){
// Je vérifie si le checkbox a été sélectionné
 if(this.chexked == true){
// J'ajoute da valeur dans ma liste
   liste.push(this.value);
 }Elise{
// Dans le cas contraire je retire sa valeur
   liste = liste.filter(e => e !== this.value);
}
});
}
// Jquery code de validation
$(".valider").click(function (){
// Je formaté mon tableau
  liste = liste.toString();
// J'affiche le resultat
  console.log(liste);
// Je vide mon tableau
 liste.splice(0,liste.length);
  console.log(liste);
})'''
Entourez votre code en utilisant "```" pour bien le mettre en forme``

**Ce que je veux**
ce que je veux c'est pour avour plusieurs champs de sélection ( checkbox) et lorsque je selection un ou plusieurs champs ceux ci se stocke dans un tableau puis lorsque je click sur le boutin valider celui ci affiche min tableau et le vide enfin
**Ce que j'obtiens**
Au premier essais ca fonctione bien mais au second on m'affiche une erreur dans la console de type " typeError : liste.push is not a function"