het gebruik van checkboxes is een goede optie wanneer u uw bezoekers de mogelijkheid wilt geven om meerdere items uit een groep keuzes te kiezen. In dat opzicht werkt het selectievakje tegenover een keuzerondje, waarmee u slechts één item uit een groep keuzes kunt selecteren., In de meest eenvoudige vorm is een checkbox gewoon een invoerelement met de eigenschap type ingesteld op checkbox, zoals dit:
<input type="checkbox">echter, zoals met alle invoerelementen, moet u een naam definiëren om het bruikbaar te zijn – zonder een naam, zal het element niet identificeerbaar zijn wanneer het formulier terug wordt gestuurd naar een server voor verwerking. U wilt ook een waarde instellen – Dit is de waarde die naar de server wordt verzonden als het selectievakje is aangevinkt., Hier is een voorbeeld:
<input type="checkbox" name="nameOfChoice" value="1">met dit voorbeeld, als het selectievakje is aangevinkt en het formulier naar een server wordt verzonden, kan de server het formulierelement” nameOfChoice ” lezen en de waarde ervan is 1.
gecontroleerd of niet gecontroleerd?
merk op dat alle selectievakjes tot nu toe niet vanaf het begin zijn aangevinkt – de gebruiker moet met het selectievakje communiceren om de status te veranderen van niet aangevinkt naar aangevinkt., Dit kan zijn wat je wilt, maar soms wil je dat het selectievakje Standaard wordt aangevinkt, ofwel om een keuze voor te stellen aan de gebruiker of omdat je een selectievakje toont met een waarde die overeenkomt met een bestaande instelling, bijvoorbeeld uit een database., Gelukkig is dit heel eenvoudig – voeg gewoon het aangevinkte attribuut toe aan het selectievakje:
<input type="checkbox" name="nameOfChoice" value="1" checked>In de oude dagen van XHTML, waar elk attribuut altijd een waarde zou moeten hebben, zelfs de Booleaanse attributen, zou het er zo uitzien:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />beide manieren zouden in alle moderne browsers moeten werken, maar de eerste manier is korter en meer “HTML5-zoals”.
meerdere keuzes
tot nu toe zijn al onze selectievakjes eenvoudige schakelaars geweest, bijvoorbeeld om te bepalen of een optie aan of uit is., Selectievakjes zijn geweldig voor dat,maar zoals gezegd, ze kunnen ook worden gebruikt om de gebruiker een selectie van mogelijke opties. Laat me je een mooi voorbeeld laten zien waar dit zinvol is:
merk op dat we nu meerdere selectievakjes hebben, maar ze delen allemaal dezelfde naam (“favorite_pet”) maar verschillende waarden (bijvoorbeeld “Dogs”). Wanneer dit formulier wordt teruggestuurd naar de server, zullen al deze selectievakjes worden weergegeven door een enkele naam, maar de waarde zal een array van 0-3 items zijn., Als u keuzerondjes had gebruikt in plaats van selectievakjes, zou de gebruiker slechts één favoriete dier mogen kiezen, maar met selectievakjes kunnen ze geen van hen selecteren, allemaal of een aantal van hen.
Labels voor selectievakjes
Als u het vorige voorbeeld hebt getest, zult u merken dat we tekst naast een selectievakje kunnen zetten, maar het zijn nog steeds twee aparte dingen – u kunt niet op de tekst klikken om het selectievakje te activeren. Dit kan heel vervelend zijn voor de gebruiker, maar gelukkig voor ons is het makkelijk op te lossen: gebruik gewoon het label element!, Hier is een basisvoorbeeld om het verschil te laten zien:
twee selectievakjes-één zonder label en één met. Ze kunnen er bijna identiek uitzien, maar degene met het label kan worden geactiveerd door te klikken op zowel de werkelijke checkbox en het bijgevoegde label. Dit is leuk als je op een desktop PC zit met een muis, maar nog beter als je een touch-apparaat gebruikt zoals een smartphone, waar kleine selectievakjes moeilijk te raken zijn met je vinger.,
het label is heel eenvoudig – het gebruikt Het for-attribuut om zichzelf aan een formulier-element te hechten met een bijpassend id-attribuut (let op hoe ik op beide plaatsen “honden” heb).
Dynamisch Werken met een selectievakje
net als elk ander DOM-element kunt u een selectievakje manipuleren met JavaScript. In dat opzicht kan het interessant zijn om te controleren of een checkbox is aangevinkt of niet en misschien wat logica toe te voegen om te bepalen hoeveel opties een gebruiker kan selecteren., Om je te laten zien hoe dit gedaan kan worden, heb ik een vorig voorbeeld (de “favoriete Pet” selector) uitgebreid met wat JavaScript magie:
laat me snel doorlopen wat deze code doet. We hebben hetzelfde formulier als voorheen, maar we hebben een event handler toegevoegd aan elk van de selectievakjes, waardoor ze een JavaScript-functie (ValidatePetSelection) aanroepen wanneer de gebruiker erop klikt. In deze functie krijgen we een greep van alle relevante selectievakjes met behulp van de getElementsByName functie en dan lus door hen om te zien of ze zijn gecontroleerd of niet – voor elk gecontroleerd item, we toevoegen aan een nummer., Dit nummer wordt dan gecontroleerd en als het twee overschrijdt, dan waarschuwen we de gebruiker over het probleem (slechts twee huisdieren kunnen worden geselecteerd) en dan keren we false terug. Als u false retourneert, wordt het selectievakje niet aangevinkt.
Dit was slechts een eenvoudig voorbeeld van hoe te werken met selectievakjes met behulp van JavaScript. Je kunt veel meer doen, vooral als je een JavaScript framework gebruikt zoals jQuery, wat het een stuk makkelijker maakt om DOM-elementen te selecteren en te manipuleren.,
samenvatting
selectievakjes staan u toe om selecteerbare opties voor uw gebruikers in te stellen – ofwel om een enkele instelling aan of uit te schakelen, of om meerdere keuzes toe te staan, zoals in het favoriete Pet voorbeeld. U moet labels gebruiken om uw selectievakje en de beschrijvende tekst aan elkaar te koppelen, zodat de gebruiker op een groter gebied kan klikken bij het manipuleren van het selectievakje – Dit is ook goed voor het assisteren van technologieën zoals schermlezers voor visueel gehandicapten.
