Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Sumowanie wartości zaznaczonych checkbox'ów
peja1990
post 19.12.2011, 14:52:53
Post #1





Grupa: Zarejestrowani
Postów: 150
Pomógł: 1
Dołączył: 4.12.2010

Ostrzeżenie: (10%)
X----

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:
[HTML] pobierz, plaintext 
  1. <label class="chbox">
  2.   <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane
  3. </label>
  4. <label class="chbox">
  5.   <input type="checkbox" name="" value="" onClick="sumAddresses('6')" />Firmy budowlane #2
  6. </label>
  7. <label class="chbox">
  8.   <input type="checkbox" name="" value="" onClick="sumAddresses('57')" />Firmy budowlane #3
  9. </label>
  10. <label class="chbox">
  11.   <input type="checkbox" name="" value="" onClick="sumAddresses('512')" />Firmy transportowe
  12. </label>
  13. <label class="chbox">
  14.   <input type="checkbox" name="" value="" onClick="sumAddresses('694')" />Produkcja i przemysł
  15. </label>
  16. <label class="chbox">
  17.   <input type="checkbox" name="" value="" onClick="sumAddresses('5')" />Motoryzacja
  18. </label>
  19. <label class="chbox">
  20.   <input type="checkbox" name="" value="" onClick="sumAddresses('0')" />Handel
  21. </label>
  22. <label class="chbox">
  23.   <input type="checkbox" name="" value="" onClick="sumAddresses('94')" />Restauracje i pizzerie
  24. </label>
[HTML] pobierz, plaintext


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:
[HTML] pobierz, plaintext 
  1. <div id="sumAmount"></div>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. document.getElementById("sumAmount").innerHTML(suma);
[PHP] pobierz, plaintext


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ł.
[PHP] pobierz, plaintext 
  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. };
[PHP] pobierz, plaintext


Serdecznie pozdrawiam,
Kamil Dunaj
Go to the top of the page
+Quote Post
mortus
post 19.12.2011, 16:03:58
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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:
[HTML] pobierz, plaintext 
  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>
[HTML] pobierz, plaintext

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>.

Ten post edytował mortus 19.12.2011, 16:05:13
Go to the top of the page
+Quote Post
Sephirus
post 19.12.2011, 16:04:26
Post #3





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
----- 

[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

[HTML] pobierz, plaintext 
  1.  <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane
[HTML] pobierz, plaintext


dodatkowo "this":

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


wink.gif


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post
peja1990
post 19.12.2011, 16:37:14
Post #4





Grupa: Zarejestrowani
Postów: 150
Pomógł: 1
Dołączył: 4.12.2010

Ostrzeżenie: (10%)
X----

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

[HTML] pobierz, plaintext 
  1.  <input type="checkbox" name="" value="" onClick="sumAddresses('12')" />Firmy budowlane
[HTML] pobierz, plaintext


dodatkowo "this":

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


wink.gif



O to właśnie chodziło !
Dzięki wielkie exclamation.gif!
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 3.05.2025 - 04:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn