Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Sumowanie wartości zaznaczonych checkbox'ów
Forum PHP.pl > Forum > Przedszkole
peja1990
Witam,
mam problem z napisaniem skryptu JS, który odpowiadałby za zliczanie wartości zaznaczonych pól typu checkbox w czasie rzeczywistym.

Mianowicie tak wygląda mój kod HTML:
  1. <label class="chbox">
  2. <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane
  3. <label class="chbox">
  4. <input type="checkbox" name="" value="" onClick="sumAddresses('6')" />Firmy budowlane #2
  5. <label class="chbox">
  6. <input type="checkbox" name="" value="" onClick="sumAddresses('57')" />Firmy budowlane #3
  7. <label class="chbox">
  8. <input type="checkbox" name="" value="" onClick="sumAddresses('512')" />Firmy transportowe
  9. <label class="chbox">
  10. <input type="checkbox" name="" value="" onClick="sumAddresses('694')" />Produkcja i przemysł
  11. <label class="chbox">
  12. <input type="checkbox" name="" value="" onClick="sumAddresses('5')" />Motoryzacja
  13. <label class="chbox">
  14. <input type="checkbox" name="" value="" onClick="sumAddresses('0')" />Handel
  15. <label class="chbox">
  16. <input type="checkbox" name="" value="" onClick="sumAddresses('94')" />Restauracje i pizzerie


Chciałbym by po zaznaczeniu pola, którego wartość zdefiniowałem w funkcji onClick="sumAddresses('94')" jego wartość została doliczona do wartości innych zaznaczonych checkbox'ów, a gdy odznaczymy pole to jego wartość zostanie odliczona od sumy wartości innych zaznaczonych pól.

Wynik chciałbym wyświetlać w czasie rzeczywistym w div'ie, którego ID zdefiniowałem jako sumAmount, czyli:
  1. <div id="sumAmount"></div>

  1. document.getElementById("sumAmount").innerHTML(suma);


Jeżeli jest ktoś w stanie mi pomóc przy tym skrypcie, będę bardzo wdzięczny.
Sam, póki co napisałem coś takiego, lecz nie działa to tak jakbym tego oczekiwał.
  1. function sumAddresses(amount) {
  2. var sum = 0;
  3. if($(this).is(':checked')) {
  4. sum = sum - parseFloat(amount);
  5. }
  6. if($(this).is(':checked') === false) {
  7. sum = sum + parseFloat(amount);
  8. }
  9. alert(sum);
  10. };


Serdecznie pozdrawiam,
Kamil Dunaj
mortus
Funkcja sumAddresses() wykorzystuje odniesienie do $(this), ale w tym momencie $(this) jest obiektem jQuery (choć to zależy od zastosowanej biblioteki), a nie klikniętym checkbox-em. Proponowałbym zorganizować listę checkbox-ów w taki sposób:
  1. <p>
  2. <input type="checkbox" name="" value="12" onClick="sumAddresses(this);" />
  3. <label class="chbox">Firmy budowlane</label>
  4. </p>
  5. <p>
  6. <input type="checkbox" name="" value="6" onClick="sumAddresses(this);" />
  7. <label class="chbox">Firmy budowlane #2</label>
  8. </p>
  9. <p>
  10. <input type="checkbox" name="" value="57" onClick="sumAddresses(this);" />
  11. <label class="chbox">Firmy budowlane #3</label>
  12. </p>
  13. <p>
  14. <input type="checkbox" name="" value="512" onClick="sumAddresses(this);" />
  15. <label class="chbox">Firmy transportowe</label>
  16. </p>
  17. <p>
  18. <input type="checkbox" name="" value="694" onClick="sumAddresses(this);" />
  19. <label class="chbox">Produkcja i przemysł</label>
  20. </p>
  21. <p>
  22. <input type="checkbox" name="" value="5" onClick="sumAddresses(this);" />
  23. <label class="chbox">Motoryzacja</label>
  24. </p>
  25. <p>
  26. <input type="checkbox" name="" value="0" onClick="sumAddresses(this);" />
  27. <label class="chbox">Handel</label>
  28. </p>
  29. <p>
  30. <input type="checkbox" name="" value="94" onClick="sumAddresses(this);" />
  31. <label class="chbox">Restauracje i pizzerie</label>
  32. </p>
  33. <div id="sumAmount"></div>

Wtedy odpowiedni skrypt będzie wyglądał tak:
[JAVASCRIPT] pobierz, plaintext
  1. var sum = 0;
  2. function sumAddresses(element) {
  3. if(element.checked === true) {
  4. sum += parseFloat(element.value);
  5. } else {
  6. sum -= parseFloat(element.value);
  7. }
  8. document.getElementById('sumAmount').innerHTML = sum;
  9. }
[JAVASCRIPT] pobierz, plaintext

Oczywiście checkbox-y możesz sobie udekorować dowolnie, pamiętaj jednak, że wg obowiązujących standardów input-y nie powinny znajdować się w etykietach <label>.
Sephirus
[JAVASCRIPT] pobierz, plaintext
  1. var sum = 0;
  2. function sumAddresses(x,obj)
  3. {
  4. sum = obj.checked ? sum + parseFloat(x) : sum - parseFloat(x);
  5. document.getElementById('sumAmount').innerHTML = sum;
  6. }
[JAVASCRIPT] pobierz, plaintext


i daj każdemu

  1. <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane


dodatkowo "this":

  1. <input type="checkbox" name="" value="" onClick="sumAddresses('12',this)" />Firmy budowlane


wink.gif
peja1990
Cytat(Sephirus @ 19.12.2011, 16:04:26 ) *
[JAVASCRIPT] pobierz, plaintext
  1. var sum = 0;
  2. function sumAddresses(x,obj)
  3. {
  4. sum = obj.checked ? sum + parseFloat(x) : sum - parseFloat(x);
  5. document.getElementById('sumAmount').innerHTML = sum;
  6. }
[JAVASCRIPT] pobierz, plaintext


i daj każdemu

  1. <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane


dodatkowo "this":

  1. <input type="checkbox" name="" value="" onClick="sumAddresses('12',this)" />Firmy budowlane


wink.gif



O to właśnie chodziło !
Dzięki wielkie exclamation.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.