använda kryssrutor är ett bra alternativ när du vill ge dina besökare möjlighet att välja flera objekt från en grupp av val. I det avseendet fungerar kryssrutan mittemot en radioknapp, som bara låter dig välja ett objekt från en grupp val., I sin enklaste form är en kryssruta helt enkelt ett inmatningselement med egenskapen typ inställd på kryssrutan, så här:
<input type="checkbox">men som med alla inmatningselement måste du definiera ett namn för att det ska kunna användas – utan ett namn kan elementet inte identifieras när du skickar formuläret tillbaka till en server för bearbetning. Du vill också ställa in ett värde – det här är det värde som skickas till servern om kryssrutan har markerats., Här är ett exempel:
<input type="checkbox" name="nameOfChoice" value="1">med det här exemplet, om kryssrutan har markerats och formuläret skickas till en server, kommer servern att kunna läsa formulärelementet ”nameOfChoice” och dess värde blir 1.
kontrolleras eller inte kontrolleras?
Lägg märke till hur alla kryssrutor hittills inte har kontrollerats från början – användaren måste interagera med kryssrutan för att ändra sitt tillstånd från okontrollerat till markerat., Det kan vara vad du vill, men ibland vill du att kryssrutan ska kontrolleras som standard, antingen för att föreslå ett val för användaren eller för att du visar en kryssruta med ett värde som motsvarar en befintlig inställning, t.ex. från en databas., Lyckligtvis är det här väldigt enkelt-lägg bara till det markerade attributet i kryssrutan:
<input type="checkbox" name="nameOfChoice" value="1" checked>i de gamla dagarna av XHTML, där varje attribut alltid ska ha ett värde, även de booleska attributen, skulle det se ut så här:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />hur som helst ska fungera i alla moderna webbläsare, men det första sättet är kortare och mer”HTML5-liknande”.
flera val
hittills har alla våra kryssrutor varit enkla växlar, t.ex. för att definiera om ett alternativ är på eller av., Kryssrutor är bra för det, men som nämnts kan de också användas för att tillåta användaren ett urval av möjliga alternativ. Låt mig visa dig ett snyggt exempel där det här är meningsfullt:
Lägg märke till hur vi nu har flera kryssrutor, men de delar alla samma namn (”favorite_pet”) men olika värden (t.ex. ”hundar”). När detta formulär skickas tillbaka till servern kommer alla dessa kryssrutor att representeras av ett enda namn, men värdet kommer att vara en array med 0-3 objekt., Om du hade använt radioknappar istället för kryssrutor, skulle användaren bara tillåtas att välja ett enda favoritdjur, men med kryssrutor kan de välja ingen av dem, alla eller några av dem.
etiketter för kryssrutor
om du testade föregående exempel, kommer du att märka att vi kan sätta text bredvid en kryssruta, men de är fortfarande två separata saker – du kan inte klicka på texten för att utlösa kryssrutan. Detta kan vara riktigt irriterande för användaren,men lyckligtvis för oss, det är lätt att lösa: bara använda etiketten elementet!, Här är ett grundläggande exempel för att visa skillnaden:
två kryssrutor – en utan etikett och en med. De kan se nästan identiska ut, men den med etiketten kan utlösas genom att klicka på både den faktiska kryssrutan och den bifogade etiketten. Det här är trevligt om du sitter på en stationär dator med en mus, men ännu bättre när du använder en touch-enhet som en smartphone, där små kryssrutor kan vara svåra att slå med fingret.,
etiketten är väldigt enkel – den använder attributet for För att fästa sig på ett formulärelement med ett matchande ID-attribut (Lägg märke till hur jag har ”hundar” på båda ställena).
arbetar dynamiskt med en kryssruta
precis som alla andra DOM-element kan du manipulera en kryssruta med JavaScript. I det avseendet kan det vara intressant att kontrollera om en kryssruta är markerad eller inte och kanske lägga till lite logik för att styra hur många alternativ en användare kan välja., För att visa dig hur detta kan göras har jag utökat ett tidigare exempel (Väljaren” favoritdjur”) för att inkludera lite JavaScript-Magi:
Tillåt mig att snabbt gå igenom vad den här koden gör. Vi har samma formulär som tidigare, men vi har lagt till en händelsehanterare till var och en av kryssrutorna, vilket får dem att ringa en JavaScript-funktion (ValidatePetSelection) när användaren klickar på dem. I den här funktionen får vi tag på alla relevanta kryssrutor med hjälp av getelementsbynamefunktionen och sedan slingrar vi igenom dem för att se om de är kontrollerade eller inte – för varje kontrollerat objekt lägger vi till ett nummer., Detta nummer kontrolleras sedan och om det överstiger två, varnar vi användaren om problemet (endast två husdjur kan väljas) och sedan returnerar vi falskt. Att returnera falskt förhindrar att kryssrutan markeras.
detta var bara ett enkelt exempel på hur man arbetar med kryssrutor med JavaScript. Du kan göra mycket mer, speciellt om du använder en JavaScript-ram som jQuery, vilket gör det mycket lättare att välja och manipulera DOM-element.,
sammanfattning
kryssrutorna gör att du kan ställa in valbara alternativ för dina användare – antingen för att växla en enda inställning på eller av, eller för att tillåta flera val, som i Favorite Pet-exemplet. Du bör använda etiketter för att knyta din kryssruta och den beskrivande texten tillsammans, så att användaren kan klicka på ett större område när du manipulerar kryssrutan – det här är också bra för att hjälpa tekniker som skärmläsare för synskadade.
