HTML & JS tips and tricks – indeterminate

Pewnie nie będzie dla Was zaskoczeniem jeśli przypomnę, że w HTMLu mamy taki typ pola jak checkbox.

Checkbox ten może być zaznaczony:

Albo niezaznaczony (stan domyślny):

Ale czy wiedzieliście, że może on mieć również status “nieokreślony” (indeterminate)?

Taki stan możemy nadać mu za pomocą prostego JavaScriptu jak poniżej:

Co ten stan nam daje?

Otóż wówczas wygląd checkboxa zmienia się na taki:

Jaką wartość “checked” ma taki checkbox?

Taką samą jak pole niezaznaczone – czyli false.

Do czego może się nam przydać taki “stan pośredni”?

Otóż może się przydać na przykład, gdy na stronie mamy jakąś listę zagnieżdżonych opcji i chcemy wizualnie podkreślić, że wybór jakiejś opcji jest uzależniony od zaznaczenia wszystkich jej dzieci:

I dopiero, gdy zaznaczymy wszystkie dzieci opcja zostanie uznana za wybraną:

Zestawienie wszystkich trzech stanów razem dla przypomnienia:

You might also like