ved Hjelp av avkrysningsbokser er et godt alternativ når du ønsker å gi de besøkende muligheten til å velge flere elementer fra en gruppe av valg. I den forbindelse avmerkingsboksen fungerer motsatt av en radio-knappen, som gir deg muligheten til å velge et element fra en gruppe av valg., I sin enkleste form, en avkrysningsrute er bare en inngang element med type-egenskapen satt til boksen, som dette:
<input type="checkbox">Men, som med alle innspill elementer, må du angi et navn for at det skal kunne brukes – uten navn, element vil ikke være identifiserbar når du legger form tilbake til en server for behandling. Du ønsker også å angi en verdi – dette vil være den verdien som er sendt til serveren hvis avmerkingsruten ikke har blitt sjekket., Her er et eksempel:
<input type="checkbox" name="nameOfChoice" value="1">Med dette eksemplet, hvis avmerkingsruten ikke har blitt sjekket og skjemaet er sendt til en server, server vil være i stand til å lese element «nameOfChoice» og dens verdi vil være 1.
Merket eller ikke merket?
legg Merke til hvordan alle rutene så langt har ikke blitt kontrollert fra begynnelsen – brukeren ville ha til å samhandle med avkrysningsruten for å endre status fra å være tom for å sjekkes., Dette kan være hva du vil, men noen ganger ønsker du av i avmerkingsboksen for å være merket av som standard, enten for å foreslå et valg for brukeren eller fordi du viser et boksen med en verdi som tilsvarer en eksisterende innstilling, for eksempel fra en database., Heldigvis, dette er veldig enkelt – bare legg sjekket attributt til checkbox:
<input type="checkbox" name="nameOfChoice" value="1" checked>I gamle dager av XHTML, hvor hver attributt skal alltid ha en verdi, selv den boolske attributter, ville det se ut som dette:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />uansett skal fungere i alle moderne nettlesere, men den første måten er kortere og mer «HTML5-lignende».
Flere valg
Så langt, er alle våre rutene har vært enkle brytere, f.eks. for å definere om et alternativ er på eller av., Rutene er stor for det, men som nevnt, de kan også brukes til å gi brukeren et utvalg av mulige alternativer. La meg vise deg et godt eksempel på hvor dette er fornuftig:
legg Merke til hvordan vi har nå flere avkrysningsbokser, men de deler alle samme navn («favorite_pet»), men med ulike verdier (f.eks. «Hunder»). Når dette skjemaet er sendt tilbake til serveren, alle disse boksene vil være representert ved et enkelt navn, men verdien vil være en rekke 0-3 elementer., Hvis du hadde brukt radio knapper i stedet for avkrysningsruter, brukeren vil bare få lov til å plukke en enkelt favoritt dyr, men med rutene, kan de velge noen av dem, alle av dem eller noen av dem.
Etiketter for avkrysningsbokser
Hvis du testet den forrige eksempel, vil du merke at vi kan sette tekst ved siden av boksen, men de er fortsatt to separate ting, som du ikke kan klikke på teksten for å utløse avmerkingsboksen. Dette kan være veldig irriterende for brukeren, men heldigvis for oss, er det enkelt å løse: det er Bare å bruke merket element!, Her er et enkelt eksempel for å vise deg forskjellen:
To rutene – en uten en etikett og en med. De ser kanskje nesten identiske, men den ene med etiketten kan bli utløst ved å klikke både selve boksen og den vedlagte etiketten. Dette er fint om du sitter på en stasjonær PC med en mus, men enda bedre når du bruker en touch-enheter som en smarttelefon, hvor små boksene kan bli vanskelig å treffe med fingeren.,
etiketten er veldig enkelt – det bruker for attributtet til å feste seg til et element med en matchende id-attributt (legg merke til hvordan jeg har «hunder» på begge steder).
å Jobbe dynamisk med en avmerkingsboks
Akkurat som alle andre DOM-element, er du i stand til å manipulere en avmerkingsboks ved hjelp av JavaScript. I den forbindelse kan det være interessant å sjekke om en avmerkingsboks er sjekket eller ikke, og kanskje legge til noen logikk for å styre hvor mange alternativer kan brukeren velge., For å vise deg hvordan dette kan gjøres, har jeg utvidet en forrige eksempel («Favoritt Kjæledyr» selector) til å omfatte noen JavaScript-magi:
Tillat meg til raskt å kjøre gjennom hva denne koden gjør. Vi har samme form som før, men vi har lagt til en hendelseshåndterer til hver av rutene, noe som fører dem til å ringe en JavaScript-funksjon (ValidatePetSelection) når brukeren klikker på dem. I denne funksjonen, kan vi få tak i alle de aktuelle avmerkingsboksene ved hjelp av getElementsByName funksjon, og da må vi gå gjennom dem for å se om de er merket eller ikke – for hver sjekket elementet, vil vi legge til et nummer., Dette tallet er så kontrollert og hvis den overstiger to, så vi varsle brukeren om problemet (bare to kjæledyr kan velges), og da må vi returnere false. Returnerer false vil hindre boksen fra å være kontrollert.
Dette var bare et enkelt eksempel på hvordan du kan arbeide med avmerkingsboksene ved hjelp av JavaScript. Du kan gjøre mye mer, spesielt hvis du bruker et JavaScript-rammeverk som jQuery, som vil gjøre det mye enklere å velge og manipulere DOM-elementer.,
Oppsummering
Rutene tillate deg å sette valgbare alternativer for brukerne – enten for å veksle mellom en enkelt innstilling på eller av, eller for å gi mulighet for flere valg, som i Favoritt Pet eksempel. Du bør bruke etiketter for å knytte avmerkingsboksen og beskrivende tekst sammen, slik at brukeren til å klikke på et større område når manipulere avmerkingsboksen – dette er også bra for å bistå teknologier som for eksempel skjermlesere for synshemmede.
