Pomocí zaškrtávacích políček je dobrá volba, když chcete dát svým návštěvníkům možnost si vybrat několik položek ze skupiny možností. V tomto ohledu zaškrtávací políčko funguje naproti tlačítku rádia, které vám umožňuje vybrat pouze jednu položku ze skupiny možností., Ve své nejjednodušší podobě, zaškrtávací políčko je prostě elementu input s type vlastnost nastavena na políčko, jako je tento:
<input type="checkbox">Nicméně, stejně jako u všech vstupních prvků, musíte definovat název, aby to bylo použitelné – bez názvu, prvek nebude identifikovatelné při účtování formulář zpět na server pro zpracování. Chcete také nastavit hodnotu-bude to hodnota odeslaná na server, pokud bylo zaškrtnuto políčko., Zde je příklad:
<input type="checkbox" name="nameOfChoice" value="1">tento příklad, je-li toto políčko bylo zaškrtnuto a formulář odešle na server, server bude schopen číst prvku formuláře „nameOfChoice“ a jeho hodnota bude 1.
zkontrolováno nebo nezkontrolováno?
Všimněte si, jak všechny políčka tak daleko, nebyly kontrolovány od začátku – uživatel by musel komunikovat s políčko, chcete-li změnit svůj stav z nekontrolovaná zkontrolovat., To by mohlo být to, co chcete, ale někdy, chcete toto políčko, chcete být ve výchozím nastavení zaškrtnuto, a to buď navrhnout volbou pro uživatele, nebo protože se ukazuje políčko s hodnotou, která odpovídá existující nastavení, např. z databáze., Naštěstí, je to velmi jednoduché – stačí přidat atribut checked do políčka:
<input type="checkbox" name="nameOfChoice" value="1" checked>Za starých časů, XHTML, kde každý atribut by měl mít vždy hodnotu, i booleovské atributy, to by mohlo vypadat jako toto:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />Jeden způsob by měl fungovat ve všech moderních prohlížečích, ale první způsob je kratší a více „HTML5-jako“.
Více možností
všechna naše zaškrtávací políčka jsou zatím jednoduché přepínače, např. pro definování, zda je volba zapnutá nebo vypnutá., Zaškrtávací políčka jsou skvělá, ale jak již bylo zmíněno, mohou být také použity k tomu, aby uživateli umožnily výběr možných možností. Ukážu vám úhledný příklad, kde to dává smysl:
Všimněte si, jak máme nyní více zaškrtávacích políček, ale všichni sdílejí stejný název („favorite_pet“), ale různé hodnoty (např. Po odeslání tohoto formuláře zpět na server budou všechna tato zaškrtávací políčka reprezentována jediným názvem, ale hodnota bude pole 0-3 položek., Pokud byste místo zaškrtávacích políček použili tlačítka rádia, uživatel by si mohl vybrat pouze jedno oblíbené zvíře, ale pomocí zaškrtávacích políček si nemůže vybrat žádné z nich, všechny nebo některé z nich.
Štítky pro políčka
Pokud jste vyzkoušeli předchozí příklad, všimnete si, že můžeme dát text vedle zaškrtávacího políčka, ale pořád jsou to dvě samostatné věci – nemůžeš klepněte na text pro spuštění zaškrtávací políčko. To může být pro uživatele opravdu nepříjemné, ale naštěstí pro nás je snadné vyřešit: stačí použít prvek štítku!, Zde je základní příklad, který vám ukáže rozdíl:
dvě zaškrtávací políčka-jedno bez štítku a jedno s. Mohou vypadat téměř identicky, ale ten s štítkem může být spuštěn kliknutím na skutečné zaškrtávací políčko i na přiložený štítek. To je hezké, pokud sedíte na stolním počítači s myší, ale ještě lépe, když používáte dotykové zařízení, jako je smartphone, kde malé zaškrtávací políčka může být těžké zasáhnout prstem.,
štítek je velmi jednoduchý – používá atribut for k připojení k prvku formuláře s atributem odpovídajícího id (všimněte si, jak mám „psy“ na obou místech).
Pracuje dynamicky s zaškrtávací políčko
Stejně jako jakýkoli jiný prvek modelu DOM, jste schopni manipulovat checkbox pomocí jazyka JavaScript. V tomto ohledu by mohlo být zajímavé zkontrolovat, zda je zaškrtnuto políčko nebo ne, a možná přidat nějakou logiku k ovládání, kolik možností může uživatel vybrat., Ukázat vám, jak to lze provést, jsem prodloužena předchozí příklad („Oblíbené Zvířátko“ selector) zahrnout některé JavaScript magic:
Dovolte mi, abych se rychle projít, co tento kód dělá. Máme stejný formulář jako dříve, ale do každého z zaškrtávacích políček jsme přidali psovod událostí, což způsobuje, že při kliknutí na ně uživatel zavolá funkci JavaScript (ValidatePetSelection). V této funkci, budeme mít všechna příslušná políčka pomocí getElementsByName funkce a pak jsme smyčka přes ně vidět, pokud jsou kontrolovány, nebo ne – pro každou zaškrtnutou položku, musíme přidat číslo., Toto číslo je poté zkontrolováno a pokud překročí dvě, upozorníme uživatele na problém (lze vybrat pouze dvě domácí zvířata) a pak vrátíme false. Vrácení false zabrání zaškrtnutí políčka.
to byl jen jednoduchý příklad toho, jak pracovat s zaškrtávacími políčky pomocí JavaScriptu. Můžete udělat mnohem víc, zejména pokud používáte rámec JavaScript, jako je jQuery, což vám usnadní výběr a manipulaci s prvky DOM.,
Shrnutí
zaškrtávací Políčka umožňují nastavení volitelných možností pro své uživatele – buď přepínat jediného nastavení zapnout nebo vypnout, nebo povolit pro více možností, jako v Oblíbené Zvířátko příklad. Měli byste používat štítky, svázat své políčko a popisný text dohromady, aby uživatel kliknout větší oblast při manipulaci políčko – to je také dobré pro pomoc technologie, jako jsou čtečky obrazovky pro zrakově postižené.
