Zjištění hodnoty políčka INPUT type='CHECKBOX'

V předcházející kapitole HTML Formuláře jsme se zmínili o zádrhelu u políčka checkbox:
políčko má stálou hodnotu value, ať je zaškrtnuté, či ne.

Pokud bych si tedy

1. přidal do formuláře checkbox "Chceš zmrzlinu?" s value="Chci zmrzlinu!", kódem

   <label for="zmrzka">Dáš si zmrzlinu?</label>
   <input type="checkbox" id="zmrzka" name="zmrzka" value="Dám si zmrzku!">

2. pojmenoval si ho (pro zkrácení zápisu) poleZmrzka a

3. nadefinoval hlídače změny způsobem obvyklým pro běžný input:

   poleZmrzka.addEventListener("change", function() {
       vysledek.innerHTML = poleZmrzka.value ;
     });

zobrazoval by se mi (ve výstupním divu) text

• "Chci zmrzlinu!"

nezávisle na tom, zda je políčko zatržené či není.

To asi není chování, které bychom si představovali. Zkuste si to sami...

Pomůžeme si vlastností policko.checked, která indikuje zatržení tlačítka.
Hodnotu policko.value vrátíme jen v případě, že policko.checked je TRUE (tedy zatržené):

A jak sestavíme podle této myšlenky JS kód:

• když bude políčko zaškrtnuté (JS-anglicky if poleZmrzka checked),
  vložíme do výstupového divu hodnotu tak, jak jsme zvyklí, a
• jinak, tedy když políčko zaškrtnuté nebude (JS-anglicky else)
  vložíme do výstupového divu prázdný text (abychom text o zmrzlině smazali):

poleZmrzka.addEventListener("change", function() {
  if (poleZmrzka.checked) {
    vysledek.innerHTML = poleZmrzka.value ;
  } else {
    vysledek.innerHTML = "" ;
  }
});

Práci si můžeme dále zjednodušit sestavením vlastní funkce pro zjištění hodnoty checkboxu:

function hodnotaCheckboxu(jmenoCheckboxu) {
  const policko = document.querySelector("#" + jmenoCheckboxu) ;
  if (policko.checked) {
    return policko.value ;
  } else {
    return "" ;
  }
}

Funkci stačí nakopírovat do JS souboru a použít (např.) následujícím způsobem:

vysledek.innerHTML = hodnotaCheckboxu("ch") ;

Konkrétně např. v tomto kódu:

document.querySelector("#ch").addEventListener("change", function() {
  vystup.innerHTML = hodnotaCheckboxu("ch") ;
});

který

• sleduje změny checkboxu s name="ch" podobně, jak jsme byli zvyklí u běžných políček,
• využívá naši funkci hodnotaCheckboxu (namísto vlastnosti value) a

při změně zapíše hodnotu checkboxu do výstupního divu.