Aktivní zaškrtávací políčko. Co je zaškrtávací políčko? Jak označit všechna zaškrtávací políčka s odkazy

Někdy při práci s formulářem nastává situace, že pro pohodlí uživatele musí být všechna zaškrtávací políčka ve formuláři označena současně. Chcete-li to provést, můžete použít další zaškrtávací políčko (Označit / Odznačit) a malý fragment kódu javascript.

Pomocí tohoto kódu můžete:

1. Označte libovolný počet zaškrtávacích políček.

2. Zaškrtněte všechna zaškrtávací políčka kliknutím pouze na jedno speciální políčko.

3. Označte a zrušte zaškrtnutí políček jedním kliknutím.

Používání:

Vytvořte html kód:

Přidejte do formuláře zaškrtávací políčko:

Napište kód javascript před uzavírací značku /head:

Výsledkem bude (demo s tímto příkladem na začátku článku):

zaškrtněte/zrušte zaškrtnutí políčka

Pokračuji v sérii článků o vylepšení prvků rozhraní. Tentokrát je řada na zaškrtávacích políčkách. Nyní můžete přijímat.

Zaškrtávací políčka

Zaškrtávací políčka – původně vytvořené jako prvky skupinového výběru. Tito. byly určeny k určení nějaké skupiny prvků pro následné skupinové akce s nimi.

Dobrá a skutečná zaškrtávací políčka jsou v Gmailu

Jakékoli moderní poštovní rozhraní může sloužit jako příklad použití zaškrtávacích políček. Označením několika písmen je můžete například všechna smazat.

Problémy a řešení při použití zaškrtávacích políček

Podívejme se na hlavní problémy, které vidím při používání zaškrtávacích políček, a na to, co lze s těmito problémy dělat.

Použití zaškrtávacích políček pro binární stavy

K výběru mezi dvěma různými možnostmi se často používá zaškrtávací políčko. Viděl jsem například takový checkbox v jednom internetovém obchodě.

Toto zaškrtávací políčko nic nevysvětluje. Není jasné, zda bude doručení poštou nebo si budu muset jít pro svůj nákup. Mnohem logičtější by v tomto případě bylo použít přepínač pro výběr požadované možnosti. Předěláváme to.

Nyní je vše mnohem jasnější

Pomocí zaškrtávacích políček povolte možnosti

Poměrně často používám zaškrtávací políčka, abych ukázal, zda je možnost povolena nebo zakázána. Což si myslím, že není správné.

Zaškrtávací políčka nejsou tlačítka. Jedná se o prvky určené pro skupinové operace. Kliknutí na zaškrtávací políčko by nemělo vést k žádné akci. Pro vizuální identifikaci povolených a neaktivovaných možností ze seznamu je barevná indikace perfektní.

Ve výše uvedeném příkladu byste vybrali několik možností a klepli na tlačítko Použít. Tato možnost je životaschopná, ale není příliš pohodlná. Co dělat? Navrhuji toto řešení:

Povolení opce v jednom z klientských projektů

Zde můžete jasně vidět stav volby (povolená nebo ne). Vypínač je hned vidět a vyřešen další problém, o kterém si povíme později. Podobný přepínač pochází z rozhraní iPhone a je důstojným analogem jednoduchého zaškrtávacího políčka.

Malá klikací plocha

Podle Fittsova zákona platí, že čím je prvek menší, tím je jeho použití obtížnější. Tento problém lze pozorovat nejen u zaškrtávacích políček. To je jeden z hlavních problémů mnoha ovládacích prvků.

Není vhodné mířit a trefit malé klíště. I když celou oblast spolu s textem nastavíte tak, aby bylo možné kliknout, uživatelé budou i nadále mířit na značku zaškrtnutí.

Jaké jsou způsoby a prostředky?

Tím se zobrazí oblast, na kterou lze kliknout.

Tlačítko zaškrtávacího políčka na webu Ostrovok.ru

Zvětšením oblasti kliknutí.

Štítek zaškrtávacího políčka na jednom z klientských projektů

3. Změňte zaškrtávací políčko na přepínač. O tom jsem psal výše.

"Vybrat vše" a "Odstranit vše"

Pro usnadnění práce s velkým počtem zaškrtávacích políček by rozhraní mělo mít možnosti „Vybrat všechna zaškrtávací políčka“ a „Vymazat všechna zaškrtávací políčka“. Jinak se práce s takovým rozhraním stává velmi únavnou a dlouhou. Představte si, že potřebujete vybrat alespoň 10 položek z 12 dostupných v seznamu. To je mnohem jednodušší, když vyberete vše a zrušíte zaškrtnutí možností, které nepotřebujete.

závěry

Zaškrtávací políčka byla původně vytvořena jako nástroje pro výběr skupiny. A neměli byste je v původní podobě používat na nic jiného. Po určitém vyladění a dodržování jednoduchých doporučení se však mohou proměnit v pohodlný nástroj pro vašeho uživatele.

V předchozích a dalších dílech

. Proč byste je neměli používat. A pokud to používáte, jak?
. Jednoduchá volba bez možnosti volby.
. Jak by měla fungovat vstupní pole s různými datovými typy.

Vstupní pole umožňuje zadat hodnotu pomocí klávesnice.

Kdy použít

Použijte vstupní pole pro krátký text nebo číselné hodnoty bez předvídatelného formátu.

V HTML5 může být vstupní pole různých typů – barva, datum, e-mail, heslo, text, adresa URL atd. Ve službách Contour používejte pouze typy textů a hesel. Zbývající typy buď nejsou podporovány hlavními prohlížeči, nebo nabízejí špatnou uživatelskou zkušenost a ověření, které se bude lišit v designu od našeho.

název

Název pole je velkými písmeny.

Pojmenujte vstupní pole podstatným jménem označujícím, co se má zadat. Vyhněte se slovům „vaše“, „vstupte“ a podobně v názvu – nedávají smysl.

Za jméno nedávejte dvojtečku: bez ní je vše jasné, vytváří pouze zbytečný vizuální šum.

Popis práce

zástupný symbol

Pokud z názvu není zřejmé, jak pole vyplnit, použijte zástupný symbol – nápovědu, která se zobrazuje uvnitř pole, dokud není vyplněno.

Placeholder (z anglického placeholder) - zástupný symbol. Často se používá jako synonymum pro "vodoznak", ale zástupný symbol je správnější název, protože. odpovídá odpovídajícímu atributu značek input a textarea.

Když je pole zaostřeno, zástupný symbol se zesvětlí a zmizí po zadání prvního znaku.

Zástupný symbol by neměl navrhovat konkrétní hodnotu, která má být zadána do pole.

Pokud je pole vypočteno a vy jste vypočítali hodnotu - použijte automatické pole:

Pokud převezmete hodnotu - předvyplňte pole, uživatel ji bude moci upravit:

Ve výjimečných případech můžete název pole umístit do zástupného symbolu: když potřebujete ušetřit místo nebo je zřejmý účel pole:

K zadání názvů polí v celém formuláři nepoužívejte zástupný symbol. Ve vyplněném stavu se takový formulář stane „slepým“:

Vyklízení pole

Pokud uživatel potřebuje pole často mazat a zadávat novou hodnotu, použijte k tomu speciální křížové tlačítko.

Když je do pole zadán alespoň 1 znak, zobrazí se křížek. Křížek je zobrazen, i když je ohnisko mimo pole.

Když kliknete na křížek, fokus se přesune na pole, zadaná hodnota se smaže:

Oblast, na kterou lze kliknout, má stejnou výšku jako vstupní pole, šířka 28 pixelů:

Internet Explorer 10 nakreslí svůj vlastní křížek pro jakékoli vstupní pole se zaměřením. Aby se tento křížek nepřekrýval s naší ikonou, musíme přidat styl:

Velikost a umístění

Vstupní pole, stejně jako tlačítko, může mít tři velikosti. Pokud se jedná o hlavní ovládací prvky na stránce, použijte střední a velká vstupní pole. Například vyhledávací pole v adresáři. V největších polích je velikost písma 16 px.

Název pole musí odpovídat účaří textu v poli:

Nastavte šířku pole tak, aby odpovídala šířce vstupní hodnoty. To uživateli říká, jaká hodnota se od něj očekává, pomáhá uživateli ujistit se, že pole vyplnil správně.

Vývojáři webových aplikací, webových stránek a desktopových programů by měli vědět, co jsou zaškrtávací políčka. Ale uživatelé, kteří mají do programování daleko, setkají se s tímto nesrozumitelným cizím slovem, poměrně často nechápou jeho význam. Ve skutečnosti je vše docela jednoduché. Zaškrtávací políčka jsou nejjednodušším ovládacím prvkem při vytváření formulářů.

Zaškrtávací políčko: normální zaškrtávací políčko

Určitě se každý z nás v životě setkal s takovým symbolem, jako je zaškrtnutí. Toto označení by nám mělo být známé, počínaje školní lavicí. Tento znak označuje správnou odpověď během testování. Zaškrtávací políčka se používají i při vyplňování různých dotazníků. Dnes, kdy uživatelé provádějí spoustu akcí přes internet, není úniku bez zaškrtnutí. Dokonce i ten nejjednodušší registrační postup na jakékoli stránce vyžaduje, aby byly zaznamenány některé body. Dnes je e-commerce rozvinutější než kdy jindy. Při vytváření objednávky může uživatel označit pouze ty položky, které ho konkrétně zajímají. Stále velmi často je při instalaci počítačových her uživatel vyzván k výběru dalšího softwaru. V tomto případě si také budete muset vybrat. Zaškrtávací políčka jsou tedy přesně stejná zaškrtávací políčka, která se používají na webových stránkách.

Použití zaškrtávacích políček při vytváření webových stránek

Vývojáři webových stránek vidí tento prvek trochu širší. Její vytvoření je totiž mnohem obtížnější než pouhé kliknutí myší na čtvereček. Webové stránky jsou vyvíjeny pomocí hypertextového značkovacího jazyka. V profesionálním prostředí se tento jazyk nazývá HTML. Chcete-li vytvořit takové zaškrtnutí v tomto jazyce, musíte napsat nějaký kód. Jak se vlastně zaškrtávací políčka vytvářejí? HTML je specializovaný prvek, což je pole vybavené typem zaškrtávacího políčka. Píše se takto:

Zaškrtávací políčko: princip fungování

Tento prvek funguje na poměrně jednoduchém principu: buď negace, nebo afirmace. Pokud je pole zaškrtnuté, prohlížeč odešle proměnnou, která odešle název pole serveru ke zpracování. Pokud zaškrtávací políčko není zaškrtnuto, server nic neobdrží. Tento prvek má atribut, který má hodnotu value. Tento atribut je volitelný. Vývojáři přidávají ke značce speciální atribut, který označuje výchozí zaškrtávací políčko. Tento atribut se nazývá check, což v angličtině znamená „zkontrolováno“.

Prvky jako zaškrtávací políčka neznamenají jeden výběr z několika možností, ale označení všech vhodných. To je důležité pro vývojáře, protože pokud formulář obsahuje několik zaškrtávacích políček, jejich názvy se musí navzájem lišit.

Závislá zaškrtávací políčka

V případě, že je nutné vybrat pouze jednu možnost z prezentované sady, lze použít další prvky, jako jsou přepínače. V některých případech se používá typ, jako jsou závislá zaškrtávací políčka. Spolu s programovacím jazykem JavaScriptHTML umožňuje vytvořit jeden hlavní checkbox, na kterém budou záviset všechny ostatní. Kliknutím na tento prvek lze zaškrtnout několik zaškrtávacích políček najednou. Toto se používá zřídka, protože je to v rozporu s pravidlem zaškrtávacích políček Zaškrtávací políčka, stejně jako ostatní značky v HTML, mají své vlastní charakteristiky. Co to může být? Atribut pro předběžnou kontrolu zaškrtnutého checkboxu jsme již zmínili. Protože zaškrtávací políčka musí mít různé názvy ve stejném tvaru, je vyžadován atribut name. Je to tento atribut, který identifikuje každý příznak samostatně. Chcete-li nastavit hodnotu, která bude odeslána na server, musíte použít atribut value. Je třeba poznamenat, že zaškrtávací políčka jsou grafické ovládací prvky, které se používají především v různých podobách. Pracují ve třech režimech: vybraný, nevybraný a neurčitý.

Použití v tabulkách

Takový prvek jako „checkbox“ lze použít nejen v HTML při vývoji webových aplikací a stránek. Tento prvek se také používá v softwaru, například v programech 1C. V podniku je mnoho různých komponent a při práci s dokumentací je nutné si toto vše všímat. Pomocí zaškrtávacího políčka můžete například označit seznam zákazníků nebo seznam zásob. V jakých dalších programech lze tento prvek použít? Každý zná program Excel od společnosti Microsoft, který se často používá jako alternativa k 1C. Princip fungování tohoto zaškrtávacího políčka je následující: pokud je zaškrtávací políčko zaškrtnuto, pak tento prvek vrací skutečnou hodnotu. Pokud není zaškrtávací políčko zaškrtnuto, pak tento prvek vrací false hodnotu. Chcete-li vložit zaškrtávací políčko do dokumentu, musíte pro vývojáře povolit speciální kartu. To lze provést pomocí možností, které se v jednotlivých verzích Excelu liší.

Jak můžete najít správné nastavení? K tomuto účelu můžete vždy použít vyhledávač nebo nápovědu. Po aktivaci této záložky bude možné tento prvek vložit pomocí příkazu "Vložit" z položky "Ovládací prvky". Zde je potřeba dát pozor na to, aby nabídka obsahovala i ovládací prvky ActiveX, které jsou umístěny pod potřebnými formulářovými prvky. Jsou zde také zaškrtávací políčka. Jaký je rozdíl Chcete-li používat ovládací prvky ActiveX, potřebujete vestavěný programovací jazyk VBA, který málokdo zná. Obyčejná zaškrtávací políčka lze svázat přímo s konkrétní buňkou v dokumentu. Po zaškrtnutí všech políček v Excelu budou ve výchozím nastavení zaškrtnuta. Pokud kliknete kamkoli do dokumentu, značka bude odstraněna. Chcete-li obrátit výběr, klikněte pravým tlačítkem na zaškrtávací políčko. Levé tlačítko zruší zaškrtnutí nebo nastaví zaškrtnutí.

Zaškrtávací políčko může mít pouze dva stavy: zaškrtnuté a nezaškrtnuté. Mohou mít libovolnou hodnotu, ale při odesílání formuláře buď předejte (zaškrtnutý stav), nebo neodesílejte (nezaškrtnutý stav). Ve výchozím nastavení je stav nezaškrtnutý. V HTML můžete zaškrtávací políčko ovládat takto:

Vizuálně může mít zaškrtávací políčko tři stavy: zaškrtnuté, nezaškrtnuté a nedefinované. Mohou vypadat takto:

Několik poznámek k zaškrtávacím políčkům:

V HTML nemůžete zaškrtávací políčko nastavit jako nedefinované. Neexistuje žádný zvláštní atribut. Ačkoli existuje vlastnost zaškrtávacího políčka, kterou lze v JavaScriptu změnit:

Var checkbox = document.getElementById("some-checkbox"); checkbox.indeterminate = true;

nebo v jQuery:

$("#nějaké-zaškrtávací políčko").prop("neurčité", true); // prop představený v jQuery 1.6+

Neurčitý stav je pouze vizuální efekt. Zaškrtávací políčko je stále v zaškrtnutém nebo nezaškrtnutém stavu. To znamená, že vizuální nedefinovaný stav maskuje skutečný stav zaškrtávacího políčka.

Stejně jako samotné zaškrtávací políčko, jeho neurčitý stav vypadá v různých prohlížečích jinak. Zde je příklad v Opeře 11.50 na Macu:

A proč je to potřeba?

Při vývoji projektů je často potřeba struktura zaškrtávacích políček. Každé zaškrtávací políčko může mít podřízené zaškrtávací políčko. Pokud jsou zaškrtnuti všichni potomci zaškrtávacího políčka, lze zaškrtnout i nadřazené zaškrtávací políčko. Není-li označen žádný dědic, není označen ani rodič. Ale pokud je zaškrtnuto alespoň jedno potomstvo, pak je rodičovské zaškrtávací políčko v neurčitém stavu (což může znamenat „částečně zaškrtnuto“).

Ukázkový kód není ideální – kontroluje se pouze jedna úroveň, aby se zavedl neurčitý stav.

Můžete také organizovat přepínání mezi stavy, když kliknete tlačítkem myši na zaškrtávací políčko:

Var $check = $("vstup"), el; $check .data("checked",0) .click(function(e) ( el = $(this); switch(el.data("checked")) ( // Stav nezaškrtnutý, přejít na nedefinovaný případ 0: el .data("checked",1); el.prop("indeterminate",true); break; // Neurčitý stav, přejít na kontrolovaný případ 1: el.data("checked",2); el.prop(" indeterminate",false); el.prop("checked",true); break; // Zaškrtnutý stav, přechod na neurčité výchozí nastavení: el.data("checked",0); el.prop("indeterminate",false) ;el.prop("zaškrtnuto",nepravda); ) ));