Het element <input type="checkbox">

Waarde

Een string die de waarde van de checkbox weergeeft. Deze wordt niet aan de clientzijde weergegeven, maar op de server is dit de value die wordt gegeven aan de gegevens die worden verzonden met de name van de checkbox. Bekijk het volgende voorbeeld:

<form>
  <div>
    <input
      type="checkbox"
      id="subscribeNews"
      name="subscribe"
      value="newsletter" />
    <label for="subscribeNews">Subscribe to newsletter?</label>
  </div>
  <div>
    <button type="submit">Subscribe</button>
  </div>
</form>

In dit voorbeeld hebben we een naam van subscribe en een waarde van newsletter. Wanneer het formulier wordt verzonden, is het naam/waarde-paar van de gegevens subscribe=newsletter.

Als het value-attribuut was weggelaten, is de standaardwaarde voor de checkbox on, dus de verzonden gegevens zouden in dat geval subscribe=on zijn.

Aanvullende attributen

Naast de gemeenschappelijke attributen die door alle <input>-elementen worden gedeeld, ondersteunen checkbox-invoervelden de volgende attributen.

Checkbox-invoervelden gebruiken

We hebben hierboven al het meest basale gebruik van checkboxes behandeld. Laten we nu naar de andere veelvoorkomende checkbox-gerelateerde functies en technieken kijken die je nodig hebt.

Meerdere checkboxes verwerken

Het voorbeeld dat we hierboven zagen bevatte slechts één checkbox; in praktijksituaties zul je waarschijnlijk meerdere checkboxes tegenkomen. Als ze volledig onafhankelijk van elkaar zijn, kun je ze gewoon allemaal apart behandelen, zoals hierboven getoond. Als ze echter allemaal gerelateerd zijn, is het niet zo eenvoudig.

In de volgende demo nemen we bijvoorbeeld meerdere checkboxes op waarmee de gebruiker zijn interesses kan selecteren (zie de volledige versie in de sectie Voorbeelden).

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

In dit voorbeeld zie je dat we elke checkbox dezelfde name hebben gegeven. Als beide checkboxes zijn aangevinkt en het formulier vervolgens wordt verzonden, krijg je een string van naam/waarde-paren verzonden als volgt: interest=coding&interest=music. Wanneer deze string de server bereikt, moet je deze op een andere manier parsen dan als een associatieve array, zodat alle waarden van interest, niet alleen de laatste waarde, worden vastgelegd. Zie bijvoorbeeld Handle Multiple Checkboxes with a Single Serverside Variable voor een techniek die met Python wordt gebruikt.

Vakjes standaard aanvinken

Om een checkbox standaard aangevinkt te maken, geef je hem het checked-attribuut. Zie het onderstaande voorbeeld:

<fieldset>
  <legend>Choose your interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

Switch als checkbox

Het volgende voorbeeld toont hoe je een checkbox laat lijken op en zich laat gedragen als een aan/uit-schakelaar.

<form>
  <fieldset>
    <legend>Adjust your setting</legend>
    <div>
      <label for="theme">Dark mode</label>
      <input type="checkbox" name="theme" id="theme" switch checked />
    </div>
    <div>
      <label for="notifications">Notifications</label>
      <input type="checkbox" name="notifications" id="notifications" switch />
    </div>
    <button type="submit">Submit</button>
  </fieldset>
</form>

Een groter klikgebied voor je checkboxes bieden

In de bovenstaande voorbeelden heb je misschien gemerkt dat je een checkbox kunt omschakelen door zowel op het bijbehorende <label>-element als op de checkbox zelf te klikken. Dit is een erg nuttige functie van HTML-formulierlabels die het makkelijker maakt om de gewenste optie aan te klikken, vooral op apparaten met een klein scherm zoals smartphones.

Naast toegankelijkheid is dit nog een goede reden om <label>-elementen goed in je formulieren op te zetten.

Checkboxes met onbepaalde status

Een checkbox kan zich in een onbepaalde (indeterminate) status bevinden. Dit wordt ingesteld via de indeterminate-eigenschap van het HTMLInputElement-object via JavaScript (het kan niet worden ingesteld met een HTML-attribuut):

inputInstance.indeterminate = true;

Wanneer indeterminate true is, heeft de checkbox in de meeste browsers een horizontale lijn in het vakje (het lijkt enigszins op een liggend streepje of minteken) in plaats van een vinkje.

Er zijn niet veel gebruikssituaties voor deze eigenschap. De meest voorkomende is wanneer er een checkbox beschikbaar is die "eigenaar" is van een aantal suboptions (die ook checkboxes zijn). Als alle suboptions zijn aangevinkt, is de bezittende checkbox ook aangevinkt, en als ze allemaal niet zijn aangevinkt, is de bezittende checkbox niet aangevinkt. Als een of meer van de suboptions een andere status hebben dan de andere, bevindt de bezittende checkbox zich in de onbepaalde status.

Dit is te zien in het onderstaande voorbeeld (met dank aan CSS Tricks voor de inspiratie). In dit voorbeeld houden we de ingrediënten bij die we verzamelen voor een recept. Wanneer je de checkbox van een ingrediënt aan- of uitvinkt, controleert een JavaScript-functie het totale aantal aangevinkte ingrediënten:

• Als er geen zijn aangevinkt, wordt de checkbox van de receptnaam ingesteld op niet-aangevinkt.
• Als er één of twee zijn aangevinkt, wordt de checkbox van de receptnaam ingesteld op indeterminate.
• Als alle drie zijn aangevinkt, wordt de checkbox van de receptnaam ingesteld op checked.

In dit geval wordt de indeterminate-status dus gebruikt om aan te geven dat het verzamelen van de ingrediënten is begonnen, maar dat het recept nog niet compleet is.

const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}

<form>
  <fieldset>
    <legend>Complete the recipe</legend>
    <div>
      <input type="checkbox" id="enchantment" name="enchantment" />
      <label for="enchantment">Enchantment table</label>
      <ul>
        <li>
          <input type="checkbox" id="book" name="ingredient" value="book" />
          <label for="book">Book</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="diamonds"
            name="ingredient"
            value="diamonds" />
          <label for="diamonds">Diamonds (x2)</label>
        </li>
        <li>
          <input
            type="checkbox"
            id="obsidian"
            name="ingredient"
            value="obsidian" />
          <label for="obsidian">Obsidian (x4)</label>
        </li>
      </ul>
    </div>
  </fieldset>
</form>

Validatie

Checkboxes ondersteunen validatie (aangeboden aan alle <input>-elementen). De meeste ValidityState's zijn echter altijd false. Als de checkbox het attribuut required heeft, maar niet is aangevinkt, dan is ValidityState.valueMissing true.

Voorbeelden

Het volgende voorbeeld is een uitgebreide versie van het voorbeeld "meerdere checkboxes" dat we hierboven zagen — het heeft meer standaardopties, plus een "other"-checkbox die, wanneer aangevinkt, ervoor zorgt dat er een tekstveld verschijnt om een waarde voor de optie "other" in te voeren. Dit wordt bereikt met een kort blok JavaScript. Het voorbeeld bevat impliciete labels, waarbij de <input> zich direct binnen de <label> bevindt. Het tekstinvoerveld, zonder zichtbaar label, bevat het aria-label-attribuut dat de toegankelijke naam ervan biedt. Dit voorbeeld bevat ook wat CSS om de styling te verbeteren.

HTML

<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <label>
        <input type="checkbox" id="coding" name="interest" value="coding" />
        Coding
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="music" name="interest" value="music" />
        Music
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="art" name="interest" value="art" />
        Art
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="sports" name="interest" value="sports" />
        Sports
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="cooking" name="interest" value="cooking" />
        Cooking
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" id="other" name="interest" value="other" />
        Other
      </label>
      <input
        type="text"
        id="otherValue"
        name="other"
        aria-label="Other interest" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>

CSS

html {
  font-family: sans-serif;
}

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}

JavaScript

const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});

Technische samenvatting