1. Ukrywamy istniejący <input type="checkbox"> za pomocą:
display: none;
visibility: hidden;

2. Tworzymy nowy checkbox .newCheck np. w span i stylujemy

3. input:checked~.newCheck - tu będzie wygląd po kliknięciu

4. .newCheck::after - tu stylujemy jak ma wyglądąć checkbox po kliknięciu, tworzymy jakiś znaczek, krzyżyk, fajkę, lub cokolwiek oznaczającego odznaczenie checkboxa. Domyślnie nadajemy display: none

5. input:checked~.newCheck::after - tutaj dajemy display: block, czyli po kliknięciu pokaże się nasze zaznaczenie

6. .newCheck::before oraz input:checked~.newCheck::before - możemy dodać również jakiś efekt przy klikaniu

1. Pobieramy wszystkie checkboxy - .querySelectorAll

2. .forEach na każdy i nadajemy nasłuchiwanie na 'click'

3. Tworzymy flagę inBetween = false

4. Tworzymy warunek, że jeżeli jest wciśnięty shift i jakiś checkbox, to iterujemy przez wszystkie checkboxy sprawdzamy jaki został wciśniety a jaki był ostatni wciśnięty i oznaczamy wszystkie pomiędzy flagą inBetween = true