Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery][JavaScript] Nadanie wartosci zmiennej przy wybraniu pola RADIO oraz sumowanie tych zmiennych
Forum PHP.pl > Forum > Przedszkole
Ciosek
17.01.2014, 17:27:16
Witam.

Co chce zrobic:
Chce przypisac przyciskowi radio zmienna a nastepnie wyswietlic sume tych zmiennych

Szczegolowy opis dzialania
Mam dwie grupy przyciskow radio.
Osoba zaznacza pole w pierwszej grupie i w tym momencie zmiennej "sect1" przypisana jest odpowiednia wartosc ( np: 100 )
Nastepnie osoba zaznacza pole w drugiej grupie i w tym momencie zmiennej "sect2" przypisana jest odpowiednia wartosc ( np: 200 )
Na koncu chce aby te wartosci byly zsumowane ( 100 + 200 ) i wyswietlil sie wynik 300

Czego bym nie chcial (o ile to mozliwe)
Korzystania z "value" w radio. Wartosci z "value" maja byc przeslane dalej i roznia sie one od tych ktore chce dodawac

Moj niedzialajacy kod
[HTML] pobierz, plaintext 
  1.  
  2. <script>	
  3. $(document).change(function(){
  4. var suma = sect1 + sect2;
  5. $('#test').html(suma);
  6. });
  7. </script>
  8.  
  9. <div id="test"></div>
  10.  
  11. <input id="g1r1" type="radio" name="art" value="small" onclick="var sect1 = 100;"/>
  12. <input id="g1r2" type="radio" name="art" value="med" onclick="var sect1 = 200;"/>
  13. <input id="g1r3" type="radio" name="art" value="big" onclick="var sect1 = 300;"/>
  14.  
  15. <input id="g2r1" type="radio" name="color" value="small" onclick="var sect2 = 100;"/>
  16. <input id="g2r2" type="radio" name="color" value="med" onclick="var sect2 = 200;"/>
  17. <input id="g2r3" type="radio" name="color" value="big" onclick="var sect3 = 300;"/>
  18.  
[HTML] pobierz, plaintext

Daimos
17.01.2014, 18:33:54 
[HTML] pobierz, plaintext 
  1.  <div id="test"></div>
  2.  <input id="g1r1" type="radio" name="art" value="small" data-var="100"/>
  3. <input id="g1r2" type="radio" name="art" value="med" data-var="200"/>
  4. <input id="g1r3" type="radio" name="art" value="big" data-var="300"/>
  5. <script type="text/javascript">
  6. var suma = 0;
  7. $('input["radio"]").change(function(){
  8. suma += parseInt($(this).data('var'));
  9. $('#test').html(suma);
  10. });
  11. </script>
[HTML] pobierz, plaintext

może tak?
edit:
w sumie niedokładnie wcześniej przeczytałem opis, a jedynie poprawiłem Twój kod.
Jeśli chcesz, aby na końcu liczyło Ci sumę wszystkich radio, to na końcu zrób coś takiego:
[HTML] pobierz, plaintext 
  1. <script>
  2. $('input[type="radio"]:selected').each(function(){
  3. console.log($(this).val()); // tutaj powinieneś mieć wszystkie wartosci
  4. });
  5. </script>
[HTML] pobierz, plaintext
Ciosek
17.01.2014, 18:51:07
Dzieki za pomoc jednak cos nadal mi nie dziala.
Przepraszam ale moja wiedza na temat javascript/jquery jest niewielka to tez dla testu wrzucilem czysty kod (myslalem ze moze jakas wtyczka jquery haczy ) na nowa strone jednak nadal nie widze w divie wyniku

Tutaj strona
Link
YourFrog
17.01.2014, 19:51:09
Hej,

Mistrzem JQuery nie jestem ale mam nadzieje że zrozumiesz przykład. W przykładzie specjalnie dałem jeden input o wartości nie będącej liczbą abyś nie zapomniał w swoim kodzie zabezpieczyć się przed taką ewentualnością. Dodatkowo będziesz musiał sobie selector w JS poprawić ale wydaje mi się że z tym to już sobie sam poradzisz.

Kod wydaje się być jasny także nie będę go tłumaczył.


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. 	<title>Przykład</title>
  4. 	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. 	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  6. 	<script>
  7. 		$(document).ready(function(){
  8. 			$('.clickable').click(clickOnInput);
  9.  
  10. 			clickOnInput();
  11. 		});
  12.  
  13. 		function clickOnInput()
  14. 		{
  15. 			var sum = 0;
  16.  
  17. 			$('input:radio:checked').each(function(){
  18. 				var dataValue = $(this).attr('data-value');
  19.  
  20. 				if( dataValue === 'undefinded' || isNaN(dataValue) )
  21. 					return true;
  22.  
  23. 				sum += parseInt(dataValue);
  24. 			});
  25.  
  26. 			$('.sum').html(sum);			
  27. 		}
  28. 	</script>
  29. </head>
  30. <body>
  31. 	<div class="group-1">
  32. 		<input type="radio" value="1" name="group[1]" class="clickable" data-value="xx">
  33. 		<input type="radio" value="2" name="group[1]" class="clickable" data-value="100">
  34. 		<input type="radio" value="3" name="group[1]" class="clickable" data-value="1000"> 
  35. 	</div>
  36.  
  37. 	<div class="group-2">
  38. 		<input type="radio" value="1" name="group[2]" class="clickable" data-value="5">
  39. 		<input type="radio" value="2" name="group[2]" class="clickable" data-value="50">
  40. 		<input type="radio" value="3" name="group[2]" class="clickable" data-value="500"> 
  41. 	</div>
  42.  
  43. 	<p>Suma wartości to <span class="sum">0</span></p>
  44. </body>
  45. </html>
[HTML] pobierz, plaintext
owca_82
17.01.2014, 20:32:16
Może coś w ten deseń wink.gif =>http://jsbin.com/OLORuKAh/5/edit
YourFrog
17.01.2014, 20:43:51
@Up

Zaznacz u siebie jakiś radio button z drugiego wiersza. Pojawi się piękny "NaN".
owca_82
17.01.2014, 20:55:28
@Up masz racje już poprawiłem smile.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.