Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zliczanie zaznaczonych checkboxów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Wescik
Witam!
Mam problem, potrzbuję zrobić skrypcik, który bedzie zliczał zaznaczone checkbox'y na bieżąco na stronie.
Chodzi mi o cos takiego np:
Zaznaczyłeś N/M
- checkbox1
x checkbox2
x checkbox3
gdzie N to jest liczba ktora wyświetla na bierząco ilosc zaznaczonych checkboxow, natomiat M wyswietla całkowita sume lity checksów. W tym przykładzie 2/3. No i zrobic jakis limit zaznaczonych checksów.
To jest skrypcik ktory zlicza checkboxy (zreszta jak wiele na tym forum) sadsmiley02.gif ale nie mam pojecia jak to zrobić.
  1. <form method="post" name=test>
  2. <script language="JavaScript1.3">
  3. function licz(form) {
  4. var zaznaczone = 0;
  5. var max = form.ckbox.length;
  6. for (var idx = 0; idx < max; idx++) {
  7. if (eval("document.test.ckbox[" + idx + "].checked") == true) {
  8. zaznaczone += 1;
  9. }
  10. }
  11. document.write("Zaznaczono " + zaznaczone + " checkbox'ów.");
  12. }
  13. 1<input type="checkbox" name="ckbox" value="1" /> checkbox 1<BR />
  14. 2<input type="checkbox" name="ckbox" value="2" /> checkbox 2<BR />
  15. 3<input type="checkbox" name="ckbox" value="3" /> checkbox 3<BR />
  16. 4<input type="checkbox" name="ckbox" value="4" /> checkbox 4<BR />
  17. 5<input type="checkbox" name="ckbox" value="5" /> checkbox 5<BR />
  18. 6<input type="checkbox" name="ckbox" value="6" /> checkbox 6<BR />
  19. <input type="button" onclick="licz(this.form)" value=" -=lol=- " />
  20.  
  21. </form>

Proszę o radę i wszelką pomoc sadsmiley02.gif
revyag
Jeśli chodzi o zliczanie checkboxów to lekka modyfikacja skryptu: smile.gif
  1. <form method="post" name=test>
  2. <script language="JavaScript1.3">
  3. function licz(form) {
  4. var zaznaczone = 0;
  5. var max = form.ckbox.length;
  6. for (var idx = 0; idx < max; idx++) {
  7. if (eval("document.test.ckbox[" + idx + "].checked") == true) {
  8. zaznaczone += 1;
  9. }
  10. }
  11. document.getElementById("check").value=zaznaczone + "/" + max;
  12. }
  13. 1<input type="checkbox" name="ckbox" value="1" onclick="licz(this.form)" /> checkbox 1<BR />
  14. 2<input type="checkbox" name="ckbox" value="2" onclick="licz(this.form)" /> checkbox 2<BR />
  15. 3<input type="checkbox" name="ckbox" value="3" onclick="licz(this.form)" /> checkbox 3<BR />
  16. 4<input type="checkbox" name="ckbox" value="4" onclick="licz(this.form)" /> checkbox 4<BR />
  17. 5<input type="checkbox" name="ckbox" value="5" onclick="licz(this.form)" /> checkbox 5<BR />
  18. 6<input type="checkbox" name="ckbox" value="6" onclick="licz(this.form)" /> checkbox 6<BR />
  19. <input type="button" onclick="licz(this.form)" value=" -=lol=- " /><br><br>
  20. <input name="check" type="text">
  21. </form>

Nie wiem natomiast o co Ci chodzi z tą maksymalną liczbą checkboxów
Wescik
Super!! O to chodziło tylko nie wiem jak to zmienić żeby działało pod wszystkimi przeglądarkami, gdyż mi pod Firefox'em niestety ten skrypcik nie działa sad.gif.
Cytat
Nie wiem natomiast o co Ci chodzi z tą maksymalną liczbą checkboxów

A co do max'a to chodziło o to zeby wyświetlał ile jest checboxów w formularzu i to jak najbardziej działa.
Jezeli można prosić to proszę o pomoc w wstawieniu limitu zaznaczonych checks'ów np. 2 zaznaczone, jezeli użytkownik chciałby zaznaczyć wiecej to wyskoczy mu stosowny komunikat smile.gif. Niby to zrobiłem, ale pewnie mozna to zrobić ładniej rolleyes.gif
  1. <form method="post" name=test>
  2. <script language="JavaScript1.3">
  3. function licz(form) {
  4. var zaznaczone = 0;
  5. var limit = 3;
  6. var max = form.ckbox.length;
  7. for (var idx = 0; idx < max; idx++) {
  8. if (eval("document.test.ckbox[" + idx + "].checked") == true) {
  9. zaznaczone += 1;
  10. }
  11. }
  12. document.getElementById("check").value=zaznaczone + "/" + max;
  13. }
  14. zaznaczone=0; //jeśli jakieś checkboxy są domyślnie zaznaczone, to tu wpisać ich liczbę
  15. max=2;
  16. function sprawdz(ktory) {
  17. if(!ktory.checked) zaznaczone--; else if(zaznaczone==max) {ktory.checked=0; alert('[komunikat...]');} else zaznaczone++;
  18. }
  19. 1<input type="checkbox" name="ckbox" value="1" onclick="licz(this.form);sprawdz(this)" /> checkbox 1<BR />
  20. 2<input type="checkbox" name="ckbox" value="2" onclick="licz(this.form);sprawdz(this)" /> checkbox 2<BR />
  21. 3<input type="checkbox" name="ckbox" value="3" onclick="licz(this.form);sprawdz(this)" /> checkbox 3<BR />
  22. 4<input type="checkbox" name="ckbox" value="4" onclick="licz(this.form);sprawdz(this)" /> checkbox 4<BR />
  23. 5<input type="checkbox" name="ckbox" value="5" onclick="licz(this.form);sprawdz(this)" /> checkbox 5<BR />
  24. 6<input type="checkbox" name="ckbox" value="6" onclick="licz(this.form);sprawdz(this)" /> checkbox 6<BR />
  25. 7<input type="checkbox" name="ckbox" value="7" onclick="licz(this.form);sprawdz(this)" /> checkbox 7<BR />
  26. <input type="button" onclick="licz(this.form)" value=" -=lol=- " /><br><br>Zaznaczono :
  27. <input name="check" type="text" size="1">
  28. </form>


i jest jeszcze jeden szczegół a mianowicie gdy wyskakuje komunikat to jest wyświetlana warotść 3/7 przy limicie 2, jednak gdy sie wciśnie button'a to juz jest ok biggrin.gif ale jezeli dało by sie to jakoś poprawic to byłbym wdzięczny.

I jeszcze raz prosze o pomoc w optymalizacji tego kodu i kompatybilnosci z wiekszością przegladarek, gdyż ten skrypt działa tylko pod IE.
Dziękuje za zainteresowanie i wszelką pomoc. snitch.gif
revyag
Co do firefoxa to umknela mi jedna rzecz.
Zmien:
  1. <input name="check" type="text">
na
  1. <input id="check" type="text">

a jeśli chodzi o limit to po prostu funkcji licz dodaj warunek przy instrukcji, która wpisuje do inputa liczbe zaznaczonych i limit
Kod
if(zaznaczone<3) document.getElementById("check").value=zaznaczone + "/" + max;
Wescik
Wielkie dzięki exclamation.gif Wszystko gra guitar.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.