Korzystanie z checkboxes jest dobrym rozwiązaniem, gdy chcesz dać odwiedzającym możliwość wyboru kilku elementów z grupy wyborów. W związku z tym pole wyboru działa odwrotnie niż przycisk radiowy, który pozwala wybrać tylko jedną pozycję z grupy opcji., W najprostszej formie checkbox jest po prostu elementem wejściowym z właściwością type ustawioną na checkbox, tak jak to:
<input type="checkbox">jednak, tak jak w przypadku wszystkich elementów wejściowych, musisz zdefiniować nazwę, aby była użyteczna – bez nazwy element nie będzie identyfikowalny podczas wysyłania formularza z powrotem do serwera do przetworzenia. Chcesz również ustawić wartość-będzie to wartość wysłana do serwera, jeśli pole wyboru zostało zaznaczone., Oto przykład:
<input type="checkbox" name="nameOfChoice" value="1">w tym przykładzie, jeśli pole wyboru zostało zaznaczone i formularz zostanie przesłany do serwera, serwer będzie mógł odczytać element formularza „nameOfChoice”, a jego wartość wyniesie 1.
sprawdzone czy nie sprawdzone?
zauważ, że do tej pory wszystkie checkboxy nie były sprawdzane Od początku – użytkownik musiałby wejść w interakcję z checkboxem, aby zmienić jego stan z niezaznaczony na sprawdzony., Może to być to, czego chcesz, ale czasami chcesz, aby pole wyboru było domyślnie zaznaczone, aby zasugerować wybór użytkownikowi lub ponieważ wyświetlasz pole wyboru z wartością odpowiadającą istniejącemu ustawieniu, np. z bazy danych., Na szczęście jest to bardzo proste – wystarczy dodać atrybut checkbox checkbox:
<input type="checkbox" name="nameOfChoice" value="1" checked>w dawnych czasach XHTML, gdzie każdy atrybut powinien zawsze mieć wartość, nawet boolean atrybuty, wyglądałby tak:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />tak czy inaczej powinien działać we wszystkich nowoczesnych przeglądarkach, ale pierwszy sposób jest krótszy i bardziej „HTML5-jak”.
Wiele opcji
do tej pory wszystkie nasze checkboxy były prostymi przełącznikami, np. do określania, czy dana opcja jest włączona, czy wyłączona., Pola wyboru są do tego świetne, ale jak wspomniano, mogą być również używane, aby umożliwić użytkownikowi wybór możliwych opcji. Pozwól, że pokażę Ci schludny przykład, w którym ma to sens:
zauważ, że mamy teraz wiele pól wyboru, ale wszystkie mają tę samą nazwę („favorite_pet”), ale różne wartości (np.”psy”). Gdy formularz zostanie przesłany z powrotem do serwera, wszystkie te pola będą reprezentowane przez jedną nazwę, ale wartością będzie tablica 0-3 pozycji., Jeśli zamiast pól wyboru użyjesz przycisków opcji, użytkownik będzie mógł wybrać tylko jedno ulubione zwierzę, ale za pomocą pól wyboru może wybrać żadne z nich, wszystkie lub niektóre z nich.
etykiety dla pól wyboru
Jeśli przetestowałeś poprzedni przykład, zauważysz, że możemy umieścić tekst obok pola wyboru, ale nadal są to dwie oddzielne rzeczy – nie możesz kliknąć tekstu, aby je wyzwolić. Może to być naprawdę irytujące dla użytkownika, ale na szczęście dla nas jest to łatwe do rozwiązania: wystarczy użyć elementu etykiety!, Oto podstawowy przykład pokazujący różnicę:
dwa pola wyboru – jedno bez etykiety i jedno z. Mogą one wyglądać prawie identycznie, ale ten z etykietą można uruchomić, klikając zarówno rzeczywiste pole wyboru, jak i dołączoną Etykietę. Jest to miłe, jeśli siedzisz na komputerze stacjonarnym z myszką, ale jeszcze lepiej, gdy używasz urządzenia dotykowego, takiego jak smartfon, gdzie małe pola wyboru mogą być trudne do trafienia palcem.,
etykieta jest bardzo prosta – używa atrybutu for, aby dołączyć się do elementu formularza z pasującym atrybutem id (zauważ, że mam „psy”w obu miejscach).
pracując dynamicznie z checkboxem
podobnie jak każdy inny element DOM, możesz manipulować checkboxem za pomocą JavaScript. W związku z tym może być interesujące sprawdzenie, czy pole wyboru jest zaznaczone, czy nie i być może dodanie logiki kontrolującej, ile opcji może wybrać użytkownik., Aby pokazać, jak można to zrobić, rozszerzyłem poprzedni przykład (selektor” ulubione zwierzątko”) o magię JavaScript:
Pozwól mi szybko uruchomić to, co robi ten kod. Mamy ten sam formularz jak poprzednio, ale dodaliśmy obsługę zdarzeń do każdego z checkboxów, co powoduje, że wywołują funkcję JavaScript (ValidatePetSelection), gdy użytkownik je kliknie. W tej funkcji uzyskujemy trzymanie wszystkich odpowiednich checkboxów za pomocą funkcji getElementsByName, a następnie pętlujemy je, aby sprawdzić, czy są zaznaczone, czy nie – dla każdego zaznaczonego elementu dodajemy do liczby., Ta liczba jest następnie sprawdzana i jeśli przekroczy dwie, wtedy ostrzegamy użytkownika o problemie (można wybrać tylko dwa zwierzaki) i zwracamy false. Zwrócenie false uniemożliwi zaznaczenie pola wyboru.
To był tylko prosty przykład pracy z checkboxami za pomocą JavaScript. Możesz zrobić znacznie więcej, zwłaszcza jeśli używasz frameworka JavaScript, takiego jak jQuery, co znacznie ułatwi zaznaczanie i manipulowanie elementami DOM.,
podsumowanie
checkboxy pozwalają skonfigurować opcje wyboru dla użytkowników – włączyć lub wyłączyć pojedyncze ustawienie lub zezwolić na wiele opcji, jak w przykładzie ulubionego zwierzaka. Należy użyć etykiet, aby powiązać pole wyboru i tekst opisowy, aby umożliwić użytkownikowi kliknięcie większego obszaru podczas manipulowania pole wyboru – jest to również dobre dla technologii wspomagających, takich jak czytniki ekranu dla osób niedowidzących.
