Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery][JavaScript] Nadanie wartosci zmiennej przy wybraniu pola RADIO oraz sumowanie tych zmiennych
Ciosek
post
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 31.01.2010

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

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

Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
Daimos
post
Post #2





Grupa: Zarejestrowani
Postów: 1 319
Pomógł: 118
Dołączył: 26.11.2003
Skąd: Lublin

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

[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


Ten post edytował Daimos 17.01.2014, 18:42:13
Go to the top of the page
+Quote Post
Ciosek
post
Post #3





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 31.01.2010

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

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
Go to the top of the page
+Quote Post
YourFrog
post
Post #4





Grupa: Zarejestrowani
Postów: 124
Pomógł: 22
Dołączył: 10.01.2014

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

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
Go to the top of the page
+Quote Post
owca_82
post
Post #5





Grupa: Zarejestrowani
Postów: 77
Pomógł: 8
Dołączył: 22.04.2012

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

Może coś w ten deseń (IMG:style_emoticons/default/wink.gif) =>http://jsbin.com/OLORuKAh/5/edit

Ten post edytował owca_82 17.01.2014, 20:54:45
Go to the top of the page
+Quote Post
YourFrog
post
Post #6





Grupa: Zarejestrowani
Postów: 124
Pomógł: 22
Dołączył: 10.01.2014

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

@Up

Zaznacz u siebie jakiś radio button z drugiego wiersza. Pojawi się piękny "NaN".
Go to the top of the page
+Quote Post
owca_82
post
Post #7





Grupa: Zarejestrowani
Postów: 77
Pomógł: 8
Dołączył: 22.04.2012

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

@Up masz racje już poprawiłem (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 5.10.2025 - 20:42
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn