Tilbage til Forms med JavaScript

1. semester / Tema 4: Grundlæggende UI

Checkboxes og getAll()

Når flere checkboxes deler samme `name`, kan du hente alle de valgte værdier med `getAll()`.

Se undervisningsslides

Relevante links

TL;DR

  1. Flere checkboxes kan dele samme name.
  2. formData.get() er ikke nok, hvis flere værdier kan være valgt.
  3. formData.getAll() returnerer en liste med alle værdierne.
  4. Listen kan samles til tekst med .join(", ").

Hvis du kun husker én ting: Når flere felter deler samme name, er formData.getAll() den rigtige måde at samle værdierne op på.

Hvorfor getAll()?

Med tekstfelter og radio buttons henter du ofte én værdi ad gangen. Men checkboxes kan give flere værdier på samme tid.

Derfor bruger man getAll() i stedet for get():

optionsOutput.textContent = formData.getAll("my_options").join(", ");

Det betyder:

Tænk på name som gruppens nøgle

Det er name, der binder checkboxene sammen som en gruppe.

Hvis tre checkboxes alle har:

name="language"

så kan du hente dem samlet med:

formData.getAll("language")

Det returnerer en liste (også kaldet et Array), fx ["HTML", "CSS"].

Gør listen læsbar

Når værdierne skal vises for brugeren, er en rå liste ikke særlig pæn. Med .join() kan du bestemme, hvordan værdierne skal vises - i dette tilfælde adskilt af komma og mellemrum:

langsOutput.textContent = formData.getAll("language").join(", ");

Så bliver outputtet til noget i stil med

HTML, CSS, JavaScript

i stedet for

HTML,CSS,JavaScript

Det er en lille ting, men det gør resultatet langt lettere at læse.

Øvelse

Her arbejder du specifikt med checkbox-værdier og getAll():