Käyttämällä valintaruudut on hyvä vaihtoehto, kun haluat antaa kävijöille mahdollisuus valita useita kohteita joukko valintoja. Tältä osin valintaruutu toimii vastapäätä radio-painiketta, jonka avulla voit vain valita yhden kohteen ryhmästä valintoja., Sen kaikkein yksinkertainen muoto, valintaruutu on yksinkertaisesti input-elementin type-attribuutti on asetettu valintaruutu, kuten tämä:
<input type="checkbox">Kuitenkin, kuten kaikki input-elementtejä, sinun täytyy määritellä nimi, jotta sitä voidaan käyttää – ilman nimeä, elementti ei ole tunnistettavissa, kun lähettämistä lomakkeen takaisin palvelimelle käsittelyä varten. Haluat myös asettaa arvon-tämä on palvelimelle lähetetty arvo, jos valintaruutu on tarkistettu., Tässä on esimerkki:
<input type="checkbox" name="nameOfChoice" value="1">tässä esimerkki, jos valintaruutu on valittuna, ja lomake lähetetään palvelimelle, palvelin voi lukea lomake-elementin ”nameOfChoice” ja sen arvo on 1.
tarkistettu vai ei tarkistettu?
Huomaa, miten kaikki valintaruudut toistaiseksi ole tarkastettu alusta – käyttäjä on vuorovaikutuksessa valintaruutu, jos haluat muuttaa sen valtion valitsematta tarkistettu., Tämä voi olla mitä haluat, mutta joskus, haluat valintaruutu on valittuna oletusarvoisesti, joko ehdottaa valinta käyttäjälle, tai koska olet ovat osoittaa valintaruutu arvo, joka vastaa olemassa olevaa asetusta, esim. tietokannasta., Onneksi tämä on hyvin yksinkertainen – lisää vain tarkistanut määrite-valintaruutu:
<input type="checkbox" name="nameOfChoice" value="1" checked>ennen vanhaan XHTML, jossa jokainen ominaisuus pitäisi aina olla arvo, vaikka boolean ominaisuudet, se voisi näyttää tältä:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />Joko niin pitäisi toimia kaikissa nykyaikaisissa selaimissa, mutta ensimmäinen tapa on lyhyempi ja enemmän ”HTML5-like”.
useita valintoja
toistaiseksi kaikki valintaruutumme ovat olleet yksinkertaisia kytkimiä, esimerkiksi sen määrittelemiseksi, onko jokin vaihtoehto päällä vai pois päältä., Valintaruudut ovat siihen hyviä, mutta kuten mainittiin, niitä voidaan myös käyttää, jotta käyttäjä voi valita mahdollisia vaihtoehtoja. Anna minun näyttää sinulle siisti esimerkki, jossa tämä on järkevää:
Huomaa, miten meillä on nyt useita valintaruutuja, mutta kaikilla niillä on sama nimi (”favorite_pet”), mutta eri arvoja (esim. ”Koira”). Kun tämä lomake lähetetään takaisin palvelimelle, kaikki nämä valintaruudut on edustaa vain yksi nimi, mutta arvo on joukko 0-3 kohteita., Jos olet käyttänyt radio-painikkeita sen sijaan, valintaruudut, käyttäjä saisi valita yhden suosikki eläin, mutta valintaruudut, he voivat valitse yksikään niistä, ne kaikki tai jotkut niistä.
Etiketit valintaruudut
Jos testataan edellisessä esimerkissä, huomaat, että voimme laittaa tekstin vieressä on valintaruutu, mutta ne ovat silti kaksi eri asiaa – et voi valitse teksti trigger-valintaruutu. Tämä voi olla todella ärsyttävää käyttäjälle, mutta onneksi meille se on helppo ratkaista: käytä Vain tarra-elementti!, Tässä perusesimerkki, jolla erot näkyvät:
kaksi valintaruutua – yksi ilman etikettiä ja yksi mukana. Ne saattavat näyttää lähes identtisiltä, mutta merkin saaneen voi laukaista klikkaamalla sekä varsinaista valintaruutua että siihen liitettyä etikettiä. Tämä on hienoa, jos olet istuu työpöydän TIETOKONE, jossa on hiiri, mutta vielä parempi, kun käytät kosketusnäyttö laite, kuten älypuhelin, jossa pieni valintaruudut voi olla vaikea osua sormella.,
etiketti on hyvin yksinkertainen – se käyttää for-ominaisuus liittää itsensä lomake-elementin kanssa matching id-attribuutti (huomatkaa, kuinka olen ”koirat” molemmissa paikoissa).
työskentely dynaamisesti valintaruudun
kanssa kuten mikä tahansa muukin Dom-elementti, voit manipuloida valintaruutua JavaScriptin avulla. Tältä osin voisi olla mielenkiintoista tarkistaa, tarkistetaanko valintaruutu vai ei, ja ehkä lisätä jonkin logiikan, jotta voidaan valvoa, kuinka monta vaihtoehtoa käyttäjä voi valita., Näyttääkseni, miten tämä voidaan tehdä, Olen laajentanut edellisen esimerkin (”suosikki lemmikki” valitsin) sisältämään joitakin JavaScript magic:
anna minun nopeasti läpi, mitä tämä koodi tekee. Meillä on samassa muodossa kuin ennen, mutta olemme lisänneet tapahtumakäsittely kunkin valintaruudut, joka aiheuttaa heille soittaa JavaScript-toiminto (ValidatePetSelection), kun käyttäjä napsauttaa niitä. Tämän toiminnon, ja saamme kaikki asiaankuuluvat valintaruudut käyttää getElementsByName toiminto ja sitten silmukan läpi niitä nähdä, jos ne ovat valittuna tai ei – jokainen tarkastettu kohde, lisäämme useita., Tämä numero tarkastetaan ja jos se ylittää kaksi, ilmoitamme käyttäjälle ongelmasta (vain kaksi lemmikkiä voidaan valita) ja palautamme väärän. Väärien palauttaminen estää valintaruudun tarkastamisen.
Tämä oli vain yksinkertainen esimerkki siitä, miten JavaScriptiä käyttävien valintaruutujen kanssa toimitaan. Voit tehdä paljon enemmän, varsinkin jos käytät JavaScript puitteet, kuten jQuery, joka tekee siitä paljon helpompi valita ja manipuloida DOM-elementtejä.,
Tiivistelmä
Valintaruudut voit setup valittavissa vaihtoehtoja käyttäjille – joko vaihtaa yhden asettaminen päälle tai pois päältä, tai sallia useita vaihtoehtoja, kuten Suosikki Lemmikki esimerkki. Sinun tulisi käyttää tarroja sitoa valintaruutu ja kuvailevaa tekstiä yhdessä, jotta käyttäjä klikkaa suurempi alue, kun manipuloimalla valintaruutu – tämä on myös hyvä avustavien teknologioiden, kuten näytönlukuohjelmien näkövammaisille.
