Boîtes à cocher (checkbox)

Cet exemple montre comment récupérer les valeurs sélectionnées dans un ensemble de boîtes à cocher.

  <fieldset>
    <legend>Ajoutez des extras à votre forfait hôtelier</legend>
    <input type="checkbox" name="extras" value="vue sur la mer" /> Chambre avec vue sur la mer<br>
    <input type="checkbox" name="extras" value="gym" /> Accès au gym<br>
    <input type="checkbox" name="extras" value="piscine" /> Accès à la piscine<br>
    <input type="checkbox" name="extras" value="dîner" /> Dîner inclus<br>
    <input type="checkbox" name="extras" value="souper" /> Souper inclus<br>
  </fieldset>

  <button>Choisir</button><br>
  Vous aurez droit à <span id="sortie"></span>

<script>

let bouton = document.querySelector("button");
bouton.addEventListener("click", afficher);

function afficher()
{
  let extras = "";
  let tabExtras = document.getElementsByName("extras");

  for (let i = 0; i < tabExtras.length; i++) {
    if (tabExtras[i].checked) {
      extras += tabExtras[i].value + ", ";
    }
  }

  sortie.innerHTML = extras;
}

</script>