Obsługa checkboxa JS

pytanie zadane 2 marca 2019 w JavaScript przez zerakot Obywatel (1,870 p.)

Witam,

Wie ktoś jak zrobić program (JS), który po zaznaczeniu jednego checkboxa pokazuje 1, dwóch - 2 i tak w kółko?

1 odpowiedź

odpowiedź 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Możesz sobie pobrać te wszystkie checkboxy, np. ustaw dla nich jakąś jednakową klasę czy atrybut data- i pobierz referencje do tablicy. Następnie przeleć się po tej tablicy i sprawdź ile elementów ma pole checked z wartością true. Pomocna może być tu np. metoda Array.prototype.filter, która Ci zwróci tablicę z elementami zaznaczonymi i po prostu odczytasz sobie jej właściwość length.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

czyli mam zrobić coś w stylu documeny.array.prototype.filter i co dalej?

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Nie ma czegoś takiego :)

Ok, łap gotowca:

wszystkim tym checkboxom przypisz np. klasę "check"
pobierz referencje do tych elementów i zamień je na tablicę Array, np.: const all = [...document.querySelectorAll('.check')];
przeleć się po tej tablicy aby odfiltrować elementy, które nie są zaznaczone, czyli zostawiamy tylko te checked: const onlyChecked = all.filter(one => one.checked)
sprawdź dugość otrzymanej tablicy: onlyChecked.length

Sorki za brak bloczków z kodem ale jestem na mobile i coś mi się rypie ten edytor kodu, więc piszę w ten sposób.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

Jak ja lubię gotowce...

Niema problemu, bez bloczków też dam radę :)

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

@Tomek Sochacki,
A tak jeszcze zapytam co mam wstawić w miejsce tego wielokropka?

const all = [...document.querySelectorAll('.check')];

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

nic, to jest operator spread w JavaScript :) generalnie querySelectorAll nie zwraca tablicy z Array.prototype i nie miałbyś tam metody filter, jeśli dobrze pamiętam to jest tam chyba tylko forEach. Także to taki prosty sposób na zamianę tego w tablicę. Można też użyć np. Array.from() to już jak wolisz. Poczytaj sobie o operatorach w JS.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

Napisałem coś takiego może być?

Zmieniłem class na kosz.

const all = [...document.querySelectorAll('.kosz')];
const onlyChecked = all.filter(one => one.checked);
onlyChecked.length;
alert(onlyChecked);

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

nom tylko, że w tym momencie to wywołanie onlyChecked.length jest bez sensowne :) Co to ma robić? Alertem próbujesz wyświetlić obiekt? Umieść w alert to length.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

Ok. Mam taki kod
HTML:

<input type='checkbox' class='kosz' onClick='kosz()'></input><label>Koszyk</label>

Js:

function kosz()
{
const all = [...document.querySelectorAll('.kosz')];
const onlyChecked = all.filter(one => one.checked);
alert(onlyCheckedlength);
}

I konsola zwraca:

ReferenceError: onlyCheckedlength is not defined

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

Kolego nie obraź się, ale weź może najpierw poczytaj o podstawach JS, a dopiero potem bierz się za pisanie :) length to właściwość obiektu onlyChecked, która jest tablicą, czyli jest to po prostu tzw. długość tablicy. Poczytaj jak się odnosi w JS do pól w obiektach albo przeanalizuj moje przykłady powyżej. I na marginesie, błąd Ci jasno i wprost mówi co jest nie tak... nie lepiej przeczytać błąd zanim się go wklei na forum :) ?

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

Tylko podstawy podstaw JS-a znam, ale ok, przeczytam.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

@Tomek Sochacki,
Dobra, ja tej kropki zapomniałem. Sam zauważyłem. Brawo ja. Dziękuję za pomoc.

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

no to dlatego najpierw się poucz porządnie podstaw :) Gdy ja jakiś czas temu miałem usiąść do większego projektu w Javie i Springu to najpierw przez miesiąc dość porządnie analizowałem dokumentację aby wyłapać różne niuanse Java vs JS i poznać sposób myślenia i pracy z frameworkiem Spring i dopiero potem zacząłem wchodzić w kod. Taka jest kolej rzeczy - najpierw musisz dobrze rozpracować podstawy, a potem dopiero większe rzeczy. I tutaj polecam szczerze dokumentacje, wiem, że wiele osób tu na forum mnie może shejtować bo jest tu masa przeciwników dokumentacji, ale wbrew tym opiniom wg mnie to naprawdę jedno z lepszych źródeł wiedzy.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

Dotychczas jako, że nie jestem z zawodu programistą to w czasie robienia projektów czytałem dokumentację, ale jak widać lepiej pana metody używać. Dziękuję za pomoc.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

@Tomek Sochacki,
Jeszcze takie pytanie z serii co gdyby - to co gdyby nadać do checkboxowi wartość i ją pobrać z js i wyświetlić? Działałoby? Wydaje mi się, że tak, ale wolę zapytać.

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

nie ma znaczenia czy wartość podasz w html czy potem w JS, wszystko zależy co chcesz osiągnąć, czasami tworzy się elementy dynamicznie, np. na podstawie jakieś zwrotki z servera itp., nie ma tu uniwersalnej odpowiedzi.

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

W sumie jak sprawdzę to się dowiem

komentarz 2 marca 2019 przez zerakot Obywatel (1,870 p.)

@Tomek Sochacki, No blisko jestem, ale nie wiem gdzie w moim kodzie dać value, aby pobrać wartość checkboxa.

Kod:

function koszyk()
{
	const wszystkie = [...document.querySelectorAll('.kosz')];
	const tylkowybrane = wszystkie.filter(one => one.checked);
	document.getElementById("nazwyproduktowwkoszu") = tylkowybrane;
}

komentarz 2 marca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

eh no weź zajrzyj do dokumentacji co robi metoda getElementById... trochę wysiłku Kolego...

możesz sobie np. zrobić dynamicznie listę ul->li z elementami wybranymi, poczytaj o createElement.