javascript sucet checkboxov, nasledne post

G0lDiER_

nazdar, javacripty vobec neovladam a potrebujem pomoct.
mam zoznam, ktory je vypisovany cyklom z sql databazy, kazdy zaznam ma 3 udaje.
povedzme:

Kód: Vybrať všetko

id   meno   cislo

pri kazdom zazname bude checkbox. ja potrebujem pod tymto zoznamom zobrazit sucet tych "cisel", pri ktorych bude zaskrtnuty checkox. toto chcem real-time, bez refreshu, preto javascript. nasledne bude submit do php skriptu, ktory spracuje tieto udaje. tieto cisla ktore budem scitavat mozu byt kludne hodnotami (Value) tych checkboxov.

dakujem za help

//autoeditácia príspevku (01 Mar 2013, 16:30)
zjednodusene povedane: potrebujem vypisat sucet hodnot checkboxov ktore su aktualne zaskrtnute.

sharky-no

moze byt aj jquery riesenie? s cistym JS som lenivy robit

pisem to z hlavy bez skusania..
//po uprave to uz funguje

Kód: Vybrať všetko

<input type="checkbox" class='nazovClassy' value='1' />
<input type="checkbox" class='nazovClassy' value='23' />
...

<input type="text" id="suma" name="suma" value="0" />
<script>
$(function(){
$('.nazovClassy').mouseup(function(){
    var suma = $("#suma");
    var sum_val = parseInt(suma.val());
    if($(this).attr('checked') != 'checked'){
         suma.val(sum_val+parseInt($(this).val()));
    }
    else{
        suma.val(sum_val-parseInt($(this).val()));
    }

});

});
</script>

G0lDiER_

prepis mi to prosim ta, aby tu hodnotu citalo z atributu "alt" v tom checkboxe a bude to super. myslim ze by to malo byt z hladiska XHTML validne a atribut value si mozem pouzit na co potrebujem do toho PHPcka, kedze do phpcka nechcem odosielat hodnotu "cislo", ale "ID"

awtt · Príspevok od používateľa **awtt** » 01 mar 2013, 16:52

Chlapci, sucet vsetkych odkliknutych checkboxov je

Kód: Vybrať všetko

$('input:checked').length

(samozrejme prislusnym selektorom), takze zbytocne prechadzat vsetky, takze spolu s listenerom su to tri riadky.

G0lDiER_

ak som spravne pochopil, tak ty zistujes pocet zakliknutych checkboxov. ja chcem sucet hodnot prisluchajucim tymto checkboxom - najprv to bol value, no teraz by mi vyhovoval sucet hodnot atributu alt

awtt · Príspevok od používateľa **awtt** » 01 mar 2013, 16:58

No tak potom mozes pouzit aj temto riesenie aj ked ja by som to este zjednodusil.
Alt ale nie je najstastnejsie riesenie, ja by som radsej presiel na html5 a data atribut.

sharky-no

nepouzivas HTML5 doctype?

tam by bolo validne toto, a je to krajsie.

Kód: Vybrať všetko

<input type="checkbox" class='nazovClassy' value='bla' data-value = '1' /> 1 <br />
<input type="checkbox" class='nazovClassy' value='bla' data-value = '23' /> 23 <br />
<input type="checkbox" class='nazovClassy' value='bla' data-value = '32' /> 32 <br />
<input type="checkbox" class='nazovClassy' value='bla' data-value = '11' /> 11 <br />
<input type="checkbox" class='nazovClassy' value='bla' data-value = '3' /> 3 <br />
<input type="checkbox" class='nazovClassy' value='bla' data-value = '53' /> 53 <br />


<input type="text" id="suma" name="suma" value="0" />
<script>
$(function(){
$('.nazovClassy').mouseup(function(){
    var suma = $("#suma");
    var sum_val = parseInt(suma.val());
    if($(this).attr('checked') != 'checked'){
         suma.val(sum_val+parseInt($(this).data('value')));
    }
    else{
        suma.val(sum_val-parseInt($(this).data('value')));
    }

});

});
</script>

alebo teda to skarede s alt

Kód: Vybrať všetko

<input type="checkbox" class='nazovClassy' value='bla' alt = '1' /> 1 <br />
<input type="checkbox" class='nazovClassy' value='bla' alt = '23' /> 23 <br />
<input type="checkbox" class='nazovClassy' value='bla' alt = '32' /> 32 <br />
<input type="checkbox" class='nazovClassy' value='bla' alt = '11' /> 11 <br />
<input type="checkbox" class='nazovClassy' value='bla' alt = '3' /> 3 <br />
<input type="checkbox" class='nazovClassy' value='bla' alt = '53' /> 53 <br />


<input type="text" id="suma" name="suma" value="0" />
<script>
$(function(){
$('.nazovClassy').mouseup(function(){
    var suma = $("#suma");
    var sum_val = parseInt(suma.val());
    if($(this).attr('checked') != 'checked'){
         suma.val(sum_val+parseInt($(this).attr('alt')));
    }
    else{
        suma.val(sum_val-parseInt($(this).attr('alt')));
    }

});

});
</script>

//pisem v buse s nb na nohach, tak som pomaly

*****HERO*****

validne nevalidne, je zle riesenie si len tak najst nejaky atribut, ktory je akoze validny a nastrkat si tam donho vlastne veci .. ked k nemu chces pridat nejaku custom hodnotu, pouzi atribut data-foo

tato funkcia ti prebehne vsetky zaskrnute checkboxy s classou 'nazovClassy' a spocita hodnoty atributu "data-hodnota"

Kód: Vybrať všetko

function spocitajCheckboxy(){
var sucet = 0;
$('input.nazovClassy:checked').each(function(){
	sucet += parseInt($(this).attr('data-hodnota'));
});
alert(sucet);
}

a pribinduj si ju na ochange tych checkboxov

Kód: Vybrať všetko

$('input.nazovClassy').change(function(){spocitajCheckboxy()});

awtt · Príspevok od používateľa **awtt** » 01 mar 2013, 17:05

Ako pise nadomnou daj si radsej change alebo hoc aj click, lebo akonahle si das k checkboxu label, mouseup ti ho neodchyti.

G0lDiER_

chalani ja s javascriptom ani nepohnem, tak pomalsie

je niektore z tychto vasich rieseni, okrem sharkyho, XHTML 1.0 Strict validne? som zvyknuty na tento standart, tak ho zatial pouzivam (slubujem, prejdem na nieco novsie). ak hej, tak prosim vas o ucelenejsi kod. atribut alt sice na toto zrovna nie je urceny, no checkbox ho moze mat, takze je to aspon relativne validne.

//autoeditácia príspevku (01 Mar 2013, 17:15)
btw sharky: bude to pracovat aj s desatinnymi cislami, da sa to spravit?

sharky-no

namiesto parseInt() pouzi parseFloat().. sak ked vies PHP tak by ti mohlo byt aj toto jasne

Kód: Vybrať všetko

<script>
$(function(){
$('.nazovClassy').click(function(){
    var suma = $("#suma");
    var pom = 0;
    $('.nazovClassy:checked').each(function(){
      pom += parseFloat($(this).attr('alt'));
    });
    suma.val(pom);
});

});
</script>

G0lDiER_

Ako viem teraz s tou premennou pracovat? Urcite to nebude v inpute, chcel by som to vypisovat napr v <p></p>

sharky-no

takto

Kód: Vybrať všetko

<p id="suma"></p>

<script>
$(function(){
$('.nazovClassy').click(function(){
    var suma = $("#suma");
    var pom = 0;
    $('.nazovClassy:checked').each(function(){
      pom += parseFloat($(this).attr('alt'));
    });
    suma.html(pom);
});

});
</script>

G0lDiER_

super. este by som bol rad, keby sa po zakliknti konkretneho checkboxu nastavila <tr> ku v ktorom tento checkbox je nejaka classa. chcem konkretne aby sa zmenil background tohto trka. teraz uz ma nejaku classu s pozadim, takze bud zmenit celu klasu, alebo mu nastavit dalsiu.
vyzera to asi takto:

Kód: Vybrať všetko

<tr class="klasa">	
    <td><input type="checkbox" name="check" class="nazovClassy" value="32" alt="2.0"></td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
</tr>

chcem aby sa po zakliknuti toho checkboxu nastavilo asi toto:

Kód: Vybrať všetko

<tr class="klasa2">

pripadne

Kód: Vybrať všetko

<tr class="klasa klasa2">

//autoeditácia príspevku (03 Mar 2013, 13:25)
+ by som bol rad, keby ten javascript vzdy vypisoval vysledok toho scitania s jednym desatinnym miestom, aj ked scita dve cele cisla.

awtt · Príspevok od používateľa **awtt** » 03 mar 2013, 13:49

Vo vnutry toho eventu na chekbox:

Kód: Vybrať všetko

  $(this).closest('tr').toggleClass('klasa klasa2');

G0lDiER_

Super. Dalej som si na nete nasiel skript, ktory zaskrtne checkbox po kliknuti kdekolvek v <tr>ku , v ktorom sa nachadza:

Kód: Vybrať všetko

<script type='text/javascript'>
$(window).load(function(){
$('table tbody tr').click(function() {
    $('input:checkbox', this).prop('checked', function(index, oldValue) {
        return !oldValue;
    });
});
});  

</script>

riesenie s <label for..> v kazdom <td>cku mi nevyhovuje, pretoze <td>cka maju nejaky padding a tym padom nedokazem roztiahnut label na celu velkost tdcka.
ten skript funguje, no nefunguje potom skript s ktorym ste mi doteraz radili. domnievam sa, ze sharkyho skript nezachytava zmenu toho checkboxu, kedze tam asi nieje splneny event .click. tak? dakujem pekne.

awtt · Príspevok od používateľa **awtt** » 04 mar 2013, 8:53

Tu mas jednoduche demo:

Kód: Vybrať všetko

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Demo</title>
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script>
	$(function(){
		$('div, input, label').click(function(event) {
			if(this === event.target){
				$('input:checkbox', this).prop('checked', function(index, oldValue) {
					return !oldValue;
				});
				var suma = $("#suma");
				var pom = 0;
				$('input:checked').each(function(){
					pom += parseFloat($(this).attr('alt'));
				});
				suma.html(pom);
			}
		});
	});
  </script>
</head>
<body>

	<div style="border:1px solid black; padding: 50px;">
		<input type="checkbox" name="asdasd" id="a" alt="45">
		<label for="a">label k tomuto inputu</a>
	</div>
	<div id="suma"></div>

</body>
</html>

G0lDiER_

ja to potrebujem pouzit v tabulke, div mi asi moc nepomoze. sam to neviem prepisat

zatial dik.

jorg22

Nechapem preco sa to snazite spravit za neho. Sak je vidiet ze sa nechce ucit iba to chce mat hotove zadarmo bez toho aby pohol prstom.

Ked nieco nevies tak to nerob, alebo sa to nauc.

G0lDiER_

ty ked potrebujes jeden skript na 10 riadkov, tak sa hned ucis novy programovaci jazyk? nie som lenivy ale nie som schopny sa zo dna na den naucit jquery aby som bol schopny toto spravit. ked budes chcet odo mnna radu a mne to potrva urobit stotinu casu nez tebe ,tak nemam problem.

javascript sucet checkboxov, nasledne post

javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post

Re: javascript sucet checkboxov, nasledne post