[JavaScript]Automatyczne odliczanie inputów i zmienianie ich klas Opcje

[michal_s]

Problem wygląda tak.
Mam sobie kilka zwykłych inputów np.

[HTML] pobierz, plaintext 
<input name="xx1" id="xx1" type="text">
<input name="xx2" id="xx2" type="text">
[HTML] pobierz, plaintext 

I chcę, aby były one automatycznie sumowane. Problem polega na tym, że są one w kilku divach, które się rozwijają gdy użytkownik zaznaczy jakiś checkbox. I nie chcę, aby było tak, że ktoś zaznaczy checkbox i wpisze jakąś kwotę a potem odczepi checkbox a ilość z inputa, który wtedy zniknął i tak będzie wtedy liczona.
Więc zrobiłem tak:

[HTML] pobierz, plaintext 
           $('#jakis_checkbox_o_id').click(function(){
               $('#xx1').toggleClass('price'); 
           });
 
           $('#jakis_checkbox_o_id2').click(function(){
               $('#xx2').toggleClass('price'); 
           });
[HTML] pobierz, plaintext 

Oraz zliczanie:

[HTML] pobierz, plaintext 
$.fn.sumValues = function() {
	var sum = 0; 
	this.each(function() {
		if ( $(this).is(':input') ) {
			var val = $(this).val();
		} else {
			var val = $(this).text();
		}
		sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
	});
	return sum;
};
 
$(document).ready(function() {
	$('input.price').bind('keyup', function() {
		$('span.total').html( $('input.price').sumValues() );
	});
});
[HTML] pobierz, plaintext 

Wszystko pięknie działa tylko nie automatycznie. Jeśli zamknę checkboxa to, żeby ilość w spanie o nazwie total się zmieniła to muszę coś zmienić w innym inpucie, który jest aktywny a to bez sensu.
jak to zrobić żeby po odkliknięciu checkboxa automatycznie zmieniała się wartość total?
mam nadzieję, ze dobrze to objaśniłem:)

[com]

no to ja widzę to tak sprawdzaj czy dane checkboxy są chacked jeśli tak no to zsumuj wszystkie aktywne

[michal_s]

Chociaż teraz widzę, że problem jest jeszcze bardziej zagmatwany. JS nie liczy mi tych inputów, które po zalogowaniu strony nie miały clasy price i która im została dodana dopiero poprzez JS po zaznaczeniu checkboxa. Zaczyna je liczyc dopiero po 'keyup' wykonanym na jakimś inpucie, który miał tą klasę przy załadowaniu strony. Jak to ominąć żeby liczył też te, które mają tą klasę dodaną potem?

[c1chy]

[JAVASCRIPT] pobierz, plaintext 
 
    var sum=0;
    $('input.klasa_inputa:visible').each(function(){
        sum+=parseFloat($(this).val()); //rzutowanie na float
    })
 
[JAVASCRIPT] pobierz, plaintext 

w ten sposób zsumujesz tylko widoczne inputy.

[michal_s]

Już jest trochę lepiej.
Te inputy domyślnie mają display:none i jak checkbox jest zaznaczany to robi się display:
I faktycznie jak zaznaczam checkboxa i coś wpisuję to ładnie suma mi się pojawia w tym polu total. Ale jak go odznaczam to on się nie odejmuje...
Odejmuje się dopiero jak zmienię jakąś wartość w innym polu input, który jest zaznaczony. A by musiało to tak działać, że od razu po odznaczeniu checkboxa kwota w total się zmniejsza ;/

[c1chy]

przenieś sumowanie do jakiejś funkcji i wywołuj ją zarówno przy zmianie inputa jak i kliknięciu checkboxa

[michal_s]

np tak ?

[PHP] pobierz, plaintext 
function sumowanie() {
$.fn.sumValues = function() {
	var sum = 0; 
	this.each(function() {
		if ( $(this).is(':input') ) {
			var val = $(this).val();
		} else {
			var val = $(this).text();
		}
		sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
	});
	return sum;
};
 
$(document).ready(function() {
	$('input.price').bind('keyup', function() {
		$('span.total').html( $('input.price').sumValues() );
	});
});
}
 
[PHP] pobierz, plaintext 

i potem

[HTML] pobierz, plaintext 
<input id="inne" name="inne" type="checkbox" onchange="sumowanie()"/>
<input name="xx1" id="xx1" type="text" onchange="sumowanie()">
[HTML] pobierz, plaintext 

Jeśli tak by to miało wyglądać to nadal efekt jest niestety taki sam jak poprzednio. Po odznaczeniu checkboxa kwota się nie zmienia.

[c1chy]

Skoro to ma być rozszerzenie do jQuery to nie zamykaj tego w funkcji, po prostu dodaj:

[JAVASCRIPT] pobierz, plaintext 
$('input.klasa_checkboxa').on('click',function(){
 
 $('span.total').html( $('input.price').sumValues() );
 
});
[JAVASCRIPT] pobierz, plaintext 

[michal_s]

Jeśli zrobię tak jak mówisz czyli:

[PHP] pobierz, plaintext 
$.fn.sumValues = function() {
  var sum=0;
    $('input.price:visible').each(function(){
        sum+=parseFloat($(this).val()); //rzutowanie na float
    })
	return sum;
};
 
$(document).ready(function() {
	$('input.price').on('click',function(){
		$('span.total').html( $('input.price').sumValues() );
	});
});
[PHP] pobierz, plaintext 

napisałeś input.klasa_checkboxa ale chyba chodziło o klasę inputa...

To w ogóle nic nie liczy i wywala NaN .

I oczywiście dzięki za dotychczasową pomoc.

[c1chy]

Chodziło mi o coś takiego:

http://jsfiddle.net/K7zFw/

[michal_s]

Dzięki, widzę, że działa ładnie:) Jutro to ogarnę myślę...