0
votes

Comment transmettre les valeurs des cases cochées à un tableau en utilisant javascript (et non jQuery)?

codeur débutant ici. Je cherche depuis quelques heures maintenant et je n'ai pas pu trouver exactement ce que je cherchais (mais proche!). J'utilise javascript et HTML pour tenter d'obtenir les valeurs des éléments cochés dans un tableau, puis afficher le tableau (à ce stade) pour vérifier que j'ai passé des valeurs à ce tableau.

J'ai testé avec succès mon. Les fichiers js et .html sont liés, et je peux définir manuellement un élément dans le tableau et cet élément s'affichera, mais je n'arrive pas à comprendre comment obtenir la «valeur» d'une case cochée passée dans le tableau. J'essaye actuellement une boucle for (trouvée sur un autre article) sans chance. Voici quelques lignes du code HTML:

<div class=columns id=produceOne>

  <input type="checkbox" name="produceitem" id="apples" value=" apples ">
  <label for="apples ">Apples</label><br>
  <input type="checkbox" name="produceitem " id="avocados " value="avocados ">
  <label for="avocados ">Avocados</label><br>

</div>

var grocItems = [];

var checkboxes = document.querySelectorAll("input[type=checkbox]:checked");

function sendProduce() {
  for (var i = 0; i < checkboxes.length; i++)
    grocItems.push(checkboxes[i].value);

  alert(grocItems);
  
}

Merci pour toute aide!

javascript html arrays checkbox

0 commentaires

3 Réponses :

1
votes

Déplacez la variable des cases à cocher dans la fonction:

var grocItems = [];

function sendProduce() {
  grocItems = [];
  var checkboxes = document.querySelectorAll("input[type='checkbox']:checked");
  for (var i = 0; i < checkboxes.length; i++) {
    grocItems.push(checkboxes[i].value);
  }
  
  console.log(grocItems);
}

3 commentaires

Je l'ai juste déplacé et je n'ai rien changé d'autre et il alerte le tableau avec les éléments sélectionnés .... MERCI!

Vous devez savoir que si vous appelez ce code deux fois, les anciennes valeurs du tableau ne sont pas supprimées, mais les nouvelles valeurs sont ajoutées.

ty Poul, je l'ai réparé.

2
votes

Cette expression, checkboxes = ... , est évaluée sur pageload , vous devez donc la déplacer vers une fonction, puis lire les cases cochées lorsque vous prêt. La page se charge et le script recherche toutes les cases cochées avec le sélecteur input: coché , mais aucune case n'est encore cochée, donc il stocke un résultat vide qui est recherché plus tard et ne change pas.

Vous pouvez lier votre logique à l'événement click de l'entrée afin que votre fonction s'exécute chaque fois qu'une case est cochée.

<div class=columns id=produceOne>

  <input type="checkbox" name="produceitem" id="apples" value=" apples ">
  <label for="apples ">Apples</label><br>
  <input type="checkbox" name="produceitem " id="avocados " value="avocados ">
  <label for="avocados ">Avocados</label><br>

</div>

function sendProduce() {
  let checked = document.querySelectorAll('input[type=checkbox]:checked'),
      grocItems = Array.from(checked).map(
        checkbox => checkbox.value.trim()
      );

  console.log(grocItems);
}

let checkboxes = document.querySelectorAll('input[type=checkbox');
Array.from(checkboxes).forEach(
  checkbox => checkbox.addEventListener('click', sendProduce)
);

0 commentaires

0
votes

Un moyen simple de le faire est de le connecter à un événement onchange afin qu'en cliquant sur la case à cocher, vous puissiez voir ce sur quoi vous avez cliqué, puis (déclenché juste après) ce qui se trouve actuellement dans le tableau.

p >

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

    <div class=columns id=produceOne>
        <input onChange="sendProduce(this)" type="checkbox" name="produceitem" id="apples" value="apples"><label for="apples">Apples</label><br>
        <input onChange="sendProduce(this)" type="checkbox" name="produceitem" id="avocados" value="avocados"><label for="avocados">Avocados</label><br>
      </div>
    <!-- Optional JavaScript -->
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        var grocItems = [];
        var checkboxes = document.querySelectorAll("input[type=checkbox]:checked");
        function sendProduce(item) {
            alert("Checkbox clicked: " + item.value)
            grocItems.push(item.value); 
            alert("Array: " + grocItems);
          }
    </script>
    </body>
</html>

0 commentaires