Rozpoznawanie checkboxów

Question

Cześć wszystkim. Potrzebuję pomysłu, jak najbardziej sensownie napisać w js/jq algorytm, który sprawdzałby, które checkboxy są zaznaczone.Mam takie ułożenie divów i checkboxów jak na rysunku wyżej (nie wstawiam kodu html i css, bo jest to nieistotne). Chciałbym, aby po kliknięciu checkboxa1 pojawiał się tylko zielony div. W przypadku zaznaczenia jakiegokolwiek checboxa2 pojawiał się niebieski i pomarańczowy. W przypadku zaznaczenia jakiegokolwiek checboxa3, checboxa4 lub żadnego, nie pojawiał się ani jeden.

Moja propozycja to nadanie funkcji onChange dla diva w którym są wszystkie checkboxy. W przypadku zmiany jakiegokolwiek z nich, w pętli zostałyby sprawdzane wszystkie checkboxy i w przypadku, gdy np. chociaż jeden posiadający data-value="1" ma wartość true to wtedy pojawia się tylko zielony div. (Wykorzystałbym cztery zmienne bool, które miałaby na początku wartość false, a gdyby pętla napotkała na checkbox z wartością true, to odpowiednia zmienna bool też przyjmowałaby wartość true. Po wyjściu z pętli, byłyby ify sprawdzające, który div ma się wyświetlić). Jest to jakiś pomysł, ale według mnie zrobiony na siłę. Czy da się to jakoś usprawnić? 

Dodatkowe pytanie: czy rozróżnianie checkboxów za pomocą nadawania im różnych data-value jest dobrą praktyką? Chodzi mi o taką sytuację: mamy samochód, motor, jabłko i banana. Dwóm pierwszym opcją nadaję data-value="1", ponieważ chcę, aby po ich zaznaczeniu pojawiły się dodatkowe divy dotyczące pojazdów, a dla jabłka i banana daję data-value="2", ponieważ chcę aby dla nich pojawiły się inne divy dotyczące owoców. Czy data-value w znaczniku to dobre narzędzie do takiego rozróżniania? 

Answer 1

Najlepiej się nie rozdrabniać! W React innych aplikacjach w stylu SPA całość zarządza się jednym spójnym stanem! Dodając do tego kilka praktyk z programowania funkcyjnego widział bym to w taki sposób: 

1) Po zamianie stanu checkboksa (niezależnie którego) uruchamiana jest ta sama funkcja!

2) Pierwsza funkcja pobiera WSZYSTKIE dane ( dobrze myślałeś ;) ) z WSZYSTKICH checkboksów i tworzy jakiś przyjemny format: Obiekt, tablica lub FormData który chyba bym polecił!

3) Kolejne funkcje już będą "czyste" czyli zależne tylko i wyłącznie od przekazanych danych i mogą zwracać one display czyli albo 'none' albo 'block' (Dla każdego bloku osobna funkcja) :) 

Co do usprawnienia dzięki separacji każdego diva do osobnej funkcji będziesz mógł przerwać pętle słowem return zwracając wartość.Odnośnie grupowania wykorzystywał bym jednak standardy tworzenia formularzy czyli skorzystał bym z atrybutu name oraz możliwości zapisania danych w tablicy czyli 

<input type="checkbox" name="pojazd[]" value="Auto"> 
<input type="checkbox" name="pojazd[]" value="Motor" /> 

Przykład kodu JS:

var blok1 = document.getElementById('blok1');
var blok2 = document.getElementById('blok2');

function onChange(){
     var state = getAllCheckBoxState(); // Pobiera dane z DOM 

     blok1.style.display = shouldDisplayBlock1(state); // funkcje zwracają 'none' lub block i dostają w parametrze już pobrane danych odnośnie wszystkich pól formularza
     blok2.style.display = shouldDisplayBlock2(state);

}

 

Comments

Super, podoba mi się to rozwiązanie. Mam pytanie jeszcze do funkcji nadającej display. Po tym jak wpiszę wszystkie stany do zmiennej state w postaci tablicy, to w sumie w shouldDisplayBlock1(state); będę musiał sprawdzić (tak jak wyżej na obrazku) tylko zerową szufladkę tablicy, zgadza się (ponieważ jest tylko jeden checkbox należący do kategorii checkbox1)? A w przypadku shouldDisplayBlock2(state); będzie sprawdzanie szufladek od pierwszej do czwartej?

---

Wszystko zależy jak zainplementujesz funkcje gelAllCheckBox. Ale pamiętaj ze w funkcjach zwracajacych  display mozesz użyć pętli