checkboxes optellen

Status
Niet open voor verdere reacties.

kirixa

Nieuwe gebruiker
Lid geworden
14 jun 2010
Berichten
3
He,

Ik ben bezig met een site waarop ik een lijst van een aantal producten heb met daarvoor een checkbox. Ik wil dat mensen meerdere checkboxes aan kunnen klikken en dat er dan onder in beeld verschijnt wat de totaal prijs is, het liefst aan de hand van de value van de checkboxes. Ik ben een javascript/html noob dus ik ben al uren bezig zonder resultaat.

Op dit moment heb ik een function staan die het niet doet. En bovendien, als ie het wel zou doen, niet zou doen wat ik wil want hij zou dan een alert geven terwijl ik het gewoon in een tekstvakje wil hebben onderaan de lijst...

Ik hoop dat iemand me kan helpen!

Als je meer informatie of verduidelijking nodig hebt hoor ik het wel (:
 
Hoi,


dit is het idee:
HTML:
<input type='checkbox' value='5' /> 5
<input type='checkbox' value='7' /> 7
<input type='checkbox' value='2' /> 2

<span id='output'>0</span>
[JS]function schechk()
{
var inputs = document.getElementsByTagName('input');
var i, len = inputs.length;
var value = 0;

for(i=0; i<len; i++)
{
if(inputs.type == 'checkbox' && inputs.checked == true)
{
value += parseInt(inputs.value, 10);
}
}

document.getElementById('output').innerHTML = value;
}[/JS]
 
Hoi kirixa,
Ja, dat ziet er vertrouwenwekkend uit: alle checkboxes afwandelen, en de gevonden voorwerpen bij elkaar optellen.
Er zou misschien nog een setInterval of zoiets voor de functie bij kunnen, zodat met niet zelf steeds iets moet aanklikken om het totaal te zien, maar dat het automatisch gaat.

Ter aanvulling: op een ander plekje in dit forum heb ik laatst een testpagina in elkaar geknutseld die iets dergelijks zou moeten doen. Daar gaat het niet om checkboxes, maar om op te geven aantallen van spullen die besteld moeten worden. Daar wordt elk moment dat je je hielen licht (= als je bij het invullen van een invoervakje een toets loslaat) het totaal opnieuw uitgerekend, en is het totaalvakje altijd actueel.
Ik heb daarbij geprobeerd een aantal mogelijke invulfouten onmogelijk te maken of van een alarmbel te voorzien. ;)
Misschien heb je daar ook nog wat aan.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@csshunter: Oh noes, je 2e link wijst naar je G:\ schijf!


Dit is de correcte link :)
 
@That Guy:
Thanks man, dat ziet er goed uit.. Ik heb alleen na wat zoeken zelf ergens iets gevonden wat inderdaad, zoals csshunter zei, direct onder in beeld zet wat het totaal bedrag is op het moment dat je een hokje aanvinkt.

@csshunter, dat ziet er erg goed uit maar iets te geavanceerd om in te leveren voor een schoolopdracht denk ik xd

Ok, ik had dit nog niet eerder gezegd maar het is een opdracht van school uit en dingen zoals veiligheid en professionaliteit zijn dus absoluut niet aan de orde, het moet werken en that's that xd

Nou heb ik dit dus soort van opgelost met deze code:

(spoiler tags zouden handig zijn)
html
Code:
<form name="F2">
<input type="checkbox" name="a" value="10" onClick="TotaalBerekenen()" /> €10,- <a href=http://en.wikipedia.org/wiki/City_of_Evil>Avenged Sevenfold - City of Evil</a><br />
<input type="checkbox" name="b" value="8.50" onClick="TotaalBerekenen()" /> €8,50 <a href=http://en.wikipedia.org/wiki/New_Medicines>Dead Poetic - New Medicines</a><br />
<input type="checkbox" name="c" value="12.50" onClick="TotaalBerekenen()" /> €12,50 <a href=http://en.wikipedia.org/wiki/In_between_Dreams>Jack Johnson - In Between Dreams</a><br />
<input type="checkbox" name="d" value="4.50" onClick="TotaalBerekenen()" /> €4,50 <a href=http://en.wikipedia.org/wiki/Graduation_(album)>Kanye West - Graduation</a><br />
<input type="checkbox" name="e" value="7.50" onClick="TotaalBerekenen()" /> €7,50 <a href=http://en.wikipedia.org/wiki/Nevermind>Nirvana - Nevermind</a><br />
<input type="checkbox" name="f" value="4.50" onClick="TotaalBerekenen()" /> €4,50 <a href=http://en.wikipedia.org/wiki/The_Sufferer_&_the_Witness>Rise Against - The Sufferer & the Witness</a><br />
<input type="checkbox" name="g" value="2.50" onClick="TotaalBerekenen()" /> €2,50 <a href=http://en.wikipedia.org/wiki/All_Hope_Is_Gone>Slipknot - All Hope is Gone</a><br />
<input type="checkbox" name="h" value="10" onClick="TotaalBerekenen()" /> €10,- <a href=http://en.wikipedia.org/wiki/Superunknown>Soundgarden - Superunknown</a><br />
<input type="checkbox" name="i" value="15" onClick="TotaalBerekenen()" /> €15,- <a href=http://en.wikipedia.org/wiki/Them_Crooked_Vultures_(album)>Them Crooked Vultures - Them Crooked Vultures</a><br />
<input type="checkbox" name="j" value="8" onClick="TotaalBerekenen()" /> €8,- <a href=http://en.wikipedia.org/wiki/The_Wombats_Proudly_Present:_A_Guide_to_Love,_Loss_&_Desperation>The Wombats - A Guide to Love, Loss & Desperation</a><br />

Totaal bedrag: <input type="text" name="T" readonly="readonly" size="5" /> <br /><br />
</form>

javascript
Code:
function TotaalBerekenen()
{
	var total = 0;
	if(document.F2.a.checked == true)
		{
		total += parseFloat(document.F2.a.value);
		}
	if(document.F2.b.checked == true) 
		{ 
		total += parseFloat(document.F2.b.value); 
		}
	if(document.F2.c.checked == true) 
		{ 
		total += parseFloat(document.F2.c.value);
		}		
	if(document.F2.d.checked == true) 
		{ 	
		total += parseFloat(document.F2.d.value);
		}
	if(document.F2.e.checked == true) 
		{ 	
		total += parseFloat(document.F2.e.value);
		}
	if(document.F2.f.checked == true) 
		{
		total += parseFloat(document.F2.f.value); 
		}
	if(document.F2.g.checked == true)
		{
		total += parseFloat(document.F2.g.value);
		}
	if(document.F2.h.checked == true)
		{
		total += parseFloat(document.F2.h.value);
		}
	if(document.F2.i.checked == true)
		{
		total += parseFloat(document.F2.i.value);
		}
	if(document.F2.j.checked == true) 
		{
		total += parseFloat(document.F2.j.value);
		}

	var ts = new String(total);
	if(ts.indexOf('.') < 0) { ts += '.00'; }
	if(ts.indexOf('.') == (ts.length - 2)) { ts += '0'; }
	document.F2.T.value = ts;
}

Ik snap niet precies hoe dit werkt, maar dat hoeft ook niet - als het maar werkt.

Het punt is namelijk dat dit van mn laatste jaar informatica is en ik nooooooit meer wat met informatica ga doen, op dit moment is het gewoon een handelingsdeel dat ik moet afhandelen omdat ik anders niet overga - daarom ben ik zo wanhopig :/

Ok, maar dit uit de weg heb ik een nieuw probleem.


Namelijk:
Ik heb hier onder een tabelletje staan waarin de klant dingen als naam, postcode, email etc moet invullen en dat(1), de gekozen artikelen(2) én het totaalbedrag(3) moeten door naar een volgende pagina waar alles nog een keer in beeld gezet wordt zodat de klant nog kan kijken of alles klopt.

Ik heb alleen geen flauw idee hoe ik dit moet doen, waar ik moet beginnen zelfs... Ik ben stiekem bang dat dit php is of niet?

for reference sake, het tabelletje wat de klant in moet vullen:
Code:
<table border="0">
	<tr>
		<td>
			Voornaam
		</td>
		<td>
			<input name="vnaam" type="text">
		</td>
	</tr>
	<tr>
		<td>
			Achternaam
		</td>
		<td>
			<input name="anaam" type="text">
		</td>
	</tr>
	<tr>
		<td>
			Postcode
		</td>
		<td>
			<input name="postcode" type="text"> 
		</td>
	</tr>
	<tr>
		<td>
			Straatnr.
		</td> 
		<td>
			<input name="straatnummer" type="text"> 
		</td>
	</tr>
	<tr>
		<td>
			E-mail
		</td>
		<td>
			<input name="email" type="text">
		</td>
	</tr>
	<tr>
		<td>
			Tel.
		</td>
		<td maxlen="10"> 
			<input name="telefoonnummer" type="text"> 
		</td>
	</tr>
</table><br />
 
Hoi,



direct onder in beeld zet wat het totaal bedrag is op het moment dat je een hokje aanvinkt.
Dat kan ook met mijn script hoor, je moet alleen bij elke checkbox dit toevoegen als attribuut:
HTML:
onclick='schechk();'



Ok, ik had dit nog niet eerder gezegd maar het is een opdracht van school
Ik snap niet precies hoe dit werkt, maar dat hoeft ook niet - als het maar werkt.
hey, ik heb mn informatica op de middelbare school al gedaan, en heb niet echt veel zin om een geheel script voor iemand te maken die er zelf te lui voor is (that is, geen zin heeft om er zelf inzet voor te tonen). Ik geloof zelfs dat er een helpmij.nl regel is die zegt dat we niet mogen (nouwja, je weet wel) helpen oid. Als je wilt dat we je helpen, zul je zelf eerst wat moeten proberen, en als je ergens tegenaan loopt, die vraag stellen. Dus geen 'wie maakt dit eventjes voor mij'-vragen.



Ik ben stiekem bang dat dit php is of niet?
Nou, in principe is dit goed te doen met php, maar het zou eventueel met Javascript kunnen. Je kan dan a) met cookies werken, of b) klooien met je query string via window.location; maar beide oplossingen zijn niet echt practisch.



:thumb:
 
Laatst bewerkt:
@ That Guy
@csshunter: Oh noes, je 2e link wijst naar je G:\ schijf!
Zuut! Ik heb ook altijd teveel tabbladen openstaan! :o
Maar ik heb wel m'n belofte waargemaakt "De testpagina staat hier". :p
Maar goed dat ik dezelfde mappenboom hanteer voor lokaal en server (hoef ik alleen maar het beginnetje er af te hakken - dit keer dus niet gedaan), maar dat had je al ontdekt. :D

Dank voor het signaal, ik moet m'n huiswerk beter maken, geloof ik.
CSShunter
 
@ kirixa:
... Ik heb alleen geen flauw idee hoe ik dit moet doen, waar ik moet beginnen zelfs... Ik ben stiekem bang dat dit php is of niet?
Daar kom je snel achter, als je 't aan de moeder van alle beginnetjes vraagt.
 
Nieuwe vraag

Bedankt voor alle hulp iedereen (:

Ik ben een heel end gekomen ondertussen en zit nu met een nieuw probleem, het leek me niet nodig een compleet nieuw topic te posten dus ik ga hier wel gewoon verder.

Wat op dit moment werkt:
De checkboxes zijn opgeteld en geven het totaal weer.
Eronder staat een formuliertje voor de klant om gegevens in te vullen.
De gegevens uit het formuliertje en het totaal bedrag worden weergegeven op een volgende pagina (zodat de klant kan controleren of de gegevens kloppen)

Wat ik nu graag zou willen is dat de gekozen producten óók weergegeven worden op de volgende pagina.
Heeft iemand suggesties hiervoor? Note: De "value" van de checkboxes is op dit moment al preoccupied met het bedrag van het product..

Mijn idee (waarschuwing: kan verwarrend overkomen)
Ik dacht zelf dat als ik gewoon een scriptje zou schrijven wat checkt of de checkboxes aangevinkt zijn en zo ja een 1 post, en zo nee een 0 post - ik dan op de volgende pagina die 0 of 1 zou uit kunnen lezen en de naam van een artikel zou kunnen posten als het een 1 is en doorgaan naar de vraag of het volgende artikel aangevinkt was and het een 0 is...

Misschien kan het wel veel simpeler, ik hoor het in ieder geval graag xd

Cheers!
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan