brug af afkrydsningsfelter er en god mulighed, når du vil give dine besøgende mulighed for at vælge flere elementer fra en gruppe af valg. I den forbindelse fungerer afkrydsningsfeltet modsat en radioknap, som kun giver dig mulighed for at vælge et element fra en gruppe valg., I sin mest enkle form er et afkrydsningsfelt simpelthen et inputelement med typen egenskab indstillet til afkrydsningsfelt, sådan:
<input type="checkbox">Som med alle inputelementer skal du dog definere et navn, så det kan bruges – uden et navn kan elementet ikke identificeres, når formularen sendes tilbage til en server til behandling. Du vil også indstille en værdi-dette vil være den værdi, der sendes til serveren, hvis afkrydsningsfeltet er markeret., Her er et eksempel:
<input type="checkbox" name="nameOfChoice" value="1">Med dette eksempel, hvis afkrydsningsfeltet er markeret, og formularen sendes til en server, vil serveren kunne læse formularelementet “nameOfChoice”, og dets værdi vil være 1.
kontrolleret eller ikke kontrolleret?
bemærk, hvordan alle afkrydsningsfelterne hidtil ikke er blevet markeret fra begyndelsen – brugeren skal interagere med afkrydsningsfeltet for at ændre sin tilstand fra ukontrolleret til markeret., Dette kan være, hvad du vil, men nogle gange vil du have, at afkrydsningsfeltet skal afkrydses som standard, enten for at foreslå et valg til brugeren, eller fordi du viser et afkrydsningsfelt med en værdi, der svarer til en eksisterende indstilling, f.eks., Heldigvis, det er meget simpelt – du skal blot tilføje kontrolleret attribut til checkbox:
<input type="checkbox" name="nameOfChoice" value="1" checked>I gamle dage af XHTML, hvor hver attribut skal altid have en værdi, selv boolean attributter, ville det se ud som dette:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />Enten måde, skal arbejde i alle moderne browsere, men den første måde er kortere og mere “HTML5-lignende”.
flere valg
indtil videre har alle vores afkrydsningsfelter været enkle kontakter, f.eks., Afkrydsningsfelter er gode til det, men som nævnt kan de også bruges til at give brugeren et udvalg af mulige muligheder. Lad mig vise dig et pænt eksempel, hvor dette giver mening:
bemærk, hvordan vi nu har flere afkrydsningsfelter, men de deler alle det samme navn (“favorite_pet”), men forskellige værdier (f.eks. Når denne formular sendes tilbage til serveren, vil alle disse afkrydsningsfelter blive repræsenteret af et enkelt navn, men værdien vil være en Matri.af 0-3 elementer., Hvis du havde brugt radioknapper i stedet for afkrydsningsfelter, ville brugeren kun få lov til at vælge et enkelt yndlingsdyr, men med afkrydsningsfelter kan de vælge ingen af dem, dem alle eller nogle af dem.
etiketter til afkrydsningsfelter
Hvis du testede det forrige eksempel, vil du bemærke, at vi kan sætte tekst ved siden af et afkrydsningsfelt, men det er stadig to separate ting – du kan ikke klikke på teksten for at udløse afkrydsningsfeltet. Dette kan være virkelig irriterende for brugeren, men heldigvis for os er det let at løse: brug bare etiketelementet!, Her er et grundlæggende eksempel for at vise dig forskellen:
to afkrydsningsfelter – en uden en etiket og en med. De ser måske næsten identiske ud, men den med etiketten kan udløses ved at klikke på både det faktiske afkrydsningsfelt og den vedhæftede etiket. Dette er rart, hvis du sidder på en stationær PC med en mus, men endnu bedre, når du bruger en berøringsenhed som en smartphone, hvor små afkrydsningsfelter kan være svære at ramme med din finger.,
etiketten er meget enkel – den bruger attributten for til at knytte sig til et formelement med en matchende id-attribut (bemærk, hvordan jeg har “hunde” begge steder).
arbejder dynamisk med et afkrydsningsfelt
ligesom ethvert andet DOM-element er du i stand til at manipulere et afkrydsningsfelt ved hjælp af JavaScript. I den forbindelse kan det være interessant at kontrollere, om et afkrydsningsfelt er markeret eller ej, og måske tilføje en vis logik for at kontrollere, hvor mange indstillinger en bruger kan vælge., For at vise dig, hvordan dette kan gøres, har jeg udvidet et tidligere eksempel (“Favorite Pet” – vælgeren) til at inkludere nogle JavaScript-magi:
Tillad mig hurtigt at gennemgå, hvad denne kode gør. Vi har den samme form som før, men vi har tilføjet en hændelseshandler til hvert af afkrydsningsfelterne, hvilket får dem til at kalde en JavaScript-funktion (ValidatePetSelection), når brugeren klikker på dem. I denne funktion får vi fat i alle de relevante afkrydsningsfelter ved hjælp af getelementsbyname – funktionen, og så løber vi igennem dem for at se, om de er markeret eller ej-for hvert markeret emne tilføjer vi et nummer., Dette nummer kontrolleres derefter, og hvis det overstiger to, advarer vi brugeren om problemet (kun to kæledyr kan vælges), og så returnerer vi false. Returnering af falsk forhindrer afkrydsningsfeltet i at blive markeret.
Dette var blot et simpelt eksempel på, hvordan man arbejder med afkrydsningsfelter ved hjælp af JavaScript. Du kan gøre meget mere, især hvis du bruger en JavaScript-ramme som j .uery, hvilket vil gøre det meget lettere at vælge og manipulere DOM-elementer.,
resum.
afkrydsningsfelter giver dig mulighed for at opsætte valgbare indstillinger for dine brugere – enten for at slå en enkelt indstilling til eller fra, eller for at give mulighed for flere valg, som i favorit Pet eksempel. Du skal bruge etiketter til at binde dit afkrydsningsfelt og den beskrivende tekst sammen, så brugeren kan klikke på et større område , når man manipulerer afkrydsningsfeltet-dette er også godt til at hjælpe teknologier som skærmlæsere til synshandicappede.
