Variablen mit checkbox zusammen rechnen Problem

floMatic

Mitglied
Hi,

also ich habe folgendes Problem...

Wenn ich eine checkbox anklicke sollen sich die Zahlen Zahlen addieren und in einem Feld ausgegeben werden.
Da ich in Javascript aber nich so fit bin haben ich mir folgendes script besorgt:

HTML:
<html>
<head>
<title>Warenkorb berechnen</title>
<script language="Javascript">
<!--
function fensteropen() {
  var fenster=window.open("fenster.html", "zweites", "width=430,height=120,status=yes,toolbar=no");
}

function calculateTotal() {
	var total = 5.30;

	// alle Checkboxes holen
	var checkboxes = document.getElementsByTagName("input"); 

    // über alle Checkboxes iterieren
	for(var i = 0; i < checkboxes.length; ++i) {
		if (checkboxes[i].checked) {
		    // wenn checkbox angewählt ist...
		    
		    // entsprechender Wert auslesen
			var s = checkboxes[i].parentNode.parentNode.cells[2].firstChild.innerHTML;
			
			// weg mit dem Euro Zeichen
			s = s.substring(2);
			
			// , durch . ersetzen
			s = s.replace(",", ".");
			
			// in Gleitkommazahl umwandeln und zum total addieren
			total += parseFloat(s);
		}
	}
	
	// das ganze auf zwei Stellen nach dem Komma runden und in die Inputbox reinschreiben
	document.getElementById("inputTotal").value = Math.round(total *100) / 100;
}

//--></script>
</head>
<body bgcolor="#CC0000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div align="center"><font size="6">Warenkorb berechnen </font></div>
<div align="center">
  <p><font size="5">Bitte w&auml;hlen Sie aus, welche Pizzen wir Ihnen liefern 
    sollen:</font></p>
  <table width="492" cellspacing="5" cellpadding="5" border="1" height="230" bgcolor="#FFAF09">
    <form name="bestellen">
      <tr> 
        <td width="66"> 
          <input type="checkbox" value="checkbox" onClick="calculateTotal()" id="5,55">
        </td>
        <td width="144"><font size="4">Pizza Napoli</font></td>
        <td width="126"><input  name="hidden" value="5,55" type="hidden"> </td>
        <td rowspan="8" width="77"><img src="../bilder/aktion.jpg" width="146" height="200"></td>
      </tr>
      <tr> 
        <td width="66"> 
          <input type="checkbox" value="checkbox" onClick="calculateTotal()">
        </td>
        <td width="144"><font size="4">Pizza Funghi</font></td>
        <td width="126"><font size="4">&euro; 5,95</font></td>
      </tr>
      <tr> 
        <td width="66"> 
          <input type="checkbox" value="checkbox" onClick="calculateTotal()">
        </td>
        <td width="144"><font size="4">Pizza-Salami</font></td>
        <td width="126"><font size="4">&euro; 6,15</font></td>
      </tr>
      <tr> 
        <td width="66"> 
          <input type="checkbox"value="checkbox" onClick="calculateTotal()">
        </td>
        <td width="144"><font size="4">Pizza Calzone</font></td>
        <td width="126"><font size="4">&euro; 7,45</font></td>
      </tr>
      <tr> 
        <td width="66"> 
          <input type="checkbox" value="checkbox" onClick="calculateTotal()">
        </td>
        <td width="144"><font size="4">Gr&uuml;ner Salat</font></td>
        <td width="126"><font size="4">&euro; 5,05</font></td>
      </tr>
      <tr> 
        <td colspan="2"><font size="4">Summe gesamt in &euro;</font></td>
        <td width="126"> 
          <input type="text" id="inputTotal" value="5.30" readonly="readonly" >
        </td>
      </tr>
      <tr> 
        <td colspan="2"> <font size="4"> 
          <input type="button" name="Button" value="   Jetzt berechnen    ">
          </font> </td>
        <td width="126"> 
          <input type="reset" name="Button2" value="   Zur&uuml;ck   ">
        </td>
      </tr>
      <tr> 
        <td colspan="2">&nbsp;</td>
        <td width="126"><div id="inputTotal"></div></td>
      </tr>
    </form>
  </table>
  <p><font size="5">Aktionswoche: Bestellen Sie drei Aktions-Pizzen zum Preis 
    von einer!<br>
    N&auml;here Informationen zu unserem Angebot erhalten Sie</font> 
<a href="#" onClick="fensteropen()"><font size="5">hier</font></a>.</p>
</div>
</body>
</html>


Das trifft so ziemlich das was ich braucht und funktioniert wunderbar.

Mein Problem ist nur das ich es leicht abändern müsste da ich die zahlen über ein hidden field auslesen möchte da diese nicht zu sehen sein solln.

so wäre die anordnung bei mir :

HTML:
<input type="checkbox" name="Cherrytomaten" value="Cherrytomaten,"/><input id="hidden" type="hidden" value="5,55" />Cherrytomaten<br />

Wie man sieht ist das hidden field direkt neben der check box nur hab ich keine ahnung wie ich den wert dort auslesen kann.


Danke schonmal für die Mühe
 
Hi,

ermittel beim Durchlauf der Input-Elemente vom jeweils Aktuellen den Elternknoten (parentNode). Von diesem ausgehend rufst du die Methode getElementsByTagName auf und besorgst dir hierüber den Wert (value) des zweiten Input-Elements. Diesen kannst du nun ebenso bearbeiten wie bisher und auf die Summe addieren.

Code:
function calculateTotal() {
	var total = 5.30;

	// alle Checkboxes holen
	var checkboxes = document.getElementsByTagName("input");

    // über alle Checkboxes iterieren
	for(var i = 0; i < checkboxes.length; ++i) {
		if (checkboxes[i].checked) {

    	               var s = checkboxes[i].parentNode.getElementsByTagName("input")[1].value;

			// , durch . ersetzen
			s = s.replace(",", ".");

			// in Gleitkommazahl umwandeln und zum total addieren
			total += parseFloat(s);
		}
	}

	// das ganze auf zwei Stellen nach dem Komma runden und in die Inputbox reinschreiben
	document.getElementById("inputTotal").value = Math.round(total *100) / 100;
}

Ciao
Quaese
 
Vielen Dank werde mir mal die Tage Javascript/Ajax Lektüren zulegen^^

Eine Frage hätte ich da noch wenn eine wann an 2ter stelle nach dem komma eine null steht wird diese nicht angezeigt wie kann ich das ändern also statt z.B. 3.60 wird nur 3.6 angezeigt.

Aber trotzdem vielen dank nochmal
 
Hi,

mit der Methode toFixed kannst du eine bestimmte Anzahl Nachkommastellen erzwingen.

Code:
document.getElementById("inputTotal").value = (Math.round(total *100) / 100).toFixed(2);

Ciao
Quaese
 
Hey Danke nochmal,

gibt zwar noch ne Sache aber die möchte ich ganz gerne mal alleine probieren.

So mit ist das Thema erstmal erledigt.
 
Hallo,

mein jetziges problem ist wie folgt.

Ich habe 6 checkboxen die wenn ich sie klicke einmalig 1 € auf den gesamt Betrag dazu rechnen sollen, das heisst ich klicke auf die erste box und es wird € dazu gerechnet wenn ich aber die 2. checkbox klicke soll kein weiterer € dazu kommen.

Nochmal der bisheriege code
HTML:
<script language="Javascript">
<!--
function calculateTotal() {
	var total = 5.30;

	// alle Checkboxes holen
	var checkboxes = document.getElementsByTagName("input"); 

    // über alle Checkboxes iterieren
	for(var i = 0; i < checkboxes.length; ++i) {
		
		if (checkboxes[i].checked) {
		    // wenn checkbox angewählt ist...
		    
		    // entsprechender Wert auslesen
			var s = checkboxes[i].parentNode.getElementsByTagName("input")[1].value;
			
			// , durch . ersetzen
			s = s.replace(",", ".");
			
			// in Gleitkommazahl umwandeln und zum total addieren
			total += parseFloat(s);
		}
	}
	
	// das ganze auf zwei Stellen nach dem Komma runden und in die Inputbox reinschreiben
	document.getElementById("inputTotal").value = (Math.round(total *100) / 100).toFixed(2);
}

//--></script>

Meine Idee war wie folgt

HTML:
if(checkboxes[47].checked || checkboxes[42].checked  || checkboxes[43].checked || checkboxes[44].checked || checkboxes[45].checked || checkboxes[46].checked) {
		var total = 6.30;
	} else {
		var total = 5.30;
	}

dazu gerechnet wird IRGENDWIE was nur leider läuft das nich fernünftig

vielleicht hat ja jemand ne idee wie man es besser machen kann
 
Hi,

so wie du es derzeit regelst, werden die Checkboxen in der normalen Überprüfung mit untersucht und wenn sie gechecked sind entsprechend mitbearbeitet, obwohl sie nicht die gesuchten Folgeinputs besitzen. Aus diesem Grund müssen sie entsprechend gekennzeichnet werden, um nicht mit überprüft zu werden.

Eine Möglichkeit wäre zum Beispiel ein Präfix im Wert des name-Attributs, anhand dessen sie identifiziert werden können (cb_extra im Beispiel). In der for-Schleife werden sie mit Hilfe der Methode search daraufhin untersucht und bei der Auswertung einfach ausgeschlossen.

Beispiel:
Code:
<html>
<head>
<title>Warenkorb berechnen</title>
<script language="Javascript">
<!--
function fensteropen() {
  var fenster=window.open("fenster.html", "zweites", "width=430,height=120,status=yes,toolbar=no");
}

function calculateTotal() {
  var total = 5.30;

  // alle Checkboxes holen
  var checkboxes = document.getElementsByTagName("input");

  if(checkboxes[0].checked || checkboxes[1].checked  || checkboxes[2].checked){
    total += 1;
  }

  // über alle Checkboxes iterieren
    for(var i = 0; i < checkboxes.length; ++i) {
      if (checkboxes[i].checked && (checkboxes[i].name.search(/cb_extra/) == -1)) {

      var s = checkboxes[i].parentNode.getElementsByTagName("input")[1].value;

      // , durch . ersetzen
      s = s.replace(",", ".");

      // in Gleitkommazahl umwandeln und zum total addieren
      total += parseFloat(s);
    }
  }

  // das ganze auf zwei Stellen nach dem Komma runden und in die Inputbox schreiben
  document.getElementById("inputTotal").value = (Math.round(total *100) / 100).toFixed(2);
}
//-->
</script>
</head>
<body bgcolor="#CC0000" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div align="center"><font size="6">Warenkorb berechnen </font></div>
<div align="center">
  <p><font size="5">Bitte wählen Sie aus, welche Pizzen wir Ihnen liefern
    sollen:</font></p>
	<input type="checkbox" name="cb_extra_01" onclick="calculateTotal()">Extra 1<br />
	<input type="checkbox" name="cb_extra_02" onclick="calculateTotal()">Extra 2<br />
	<input type="checkbox" name="cb_extra_03" onclick="calculateTotal()">Extra 3
  <table width="492" cellspacing="5" cellpadding="5" border="1" height="230" bgcolor="#FFAF09">
    <form name="bestellen">
      <tr>
        <td width="66">
          <input type="checkbox" value="checkbox" onClick="calculateTotal()" id="5,55"><input id="hidden" type="hidden" value="5,50" />Pizza Napoli<br />
        </td>
        <td width="144"><font size="4">Pizza Napoli</font></td>
        <td width="126"><input  name="hidden" value="5,55" type="hidden"></td>
        <td rowspan="8" width="77"><img src="../bilder/aktion.jpg" width="146" height="200"></td>
      </tr>
      <tr>
        <td width="66">
          <input type="checkbox" value="checkbox" onClick="calculateTotal()"><input id="hidden" type="hidden" value="5.95" />Pizza Funghi<br />
        </td>
        <td width="144"><font size="4">Pizza Funghi</font></td>
        <td width="126"><font size="4">&euro; 5,95</font></td>
      </tr>
      <tr>
        <td width="66">
          <input type="checkbox" value="checkbox" onClick="calculateTotal()"><input id="hidden" type="hidden" value="6.15" />Pizza-Salami<br />
        </td>
        <td width="144"><font size="4">Pizza-Salami</font></td>
        <td width="126"><font size="4">&euro; 6,15</font></td>
      </tr>
      <tr>
        <td width="66">
          <input type="checkbox"value="checkbox" onClick="calculateTotal()"><input id="hidden" type="hidden" value="7.45" />Pizza Calzone<br />
        </td>
        <td width="144"><font size="4">Pizza Calzone</font></td>
        <td width="126"><font size="4">&euro; 7,45</font></td>
      </tr>
      <tr>
        <td width="66">
          <input type="checkbox" value="checkbox" onClick="calculateTotal()"><input id="hidden" type="hidden" value="5.05" />Grüner Salat<br />
        </td>
        <td width="144"><font size="4">Grüner Salat</font></td>
        <td width="126"><font size="4">&euro; 5,05</font></td>
      </tr>
      <tr>
        <td colspan="2"><font size="4">Summe gesamt in &euro;</font></td>
        <td width="126">
          <input type="text" id="inputTotal" value="5.30" readonly="readonly" >
        </td>
      </tr>
      <tr>
        <td colspan="2"> <font size="4">
          <input type="button" name="Button" value="   Jetzt berechnen    ">
          </font> </td>
        <td width="126">
          <input type="reset" name="Button2" value="   Zurück   ">
        </td>
      </tr>
      <tr>
        <td colspan="2">&nbsp;</td>
        <td width="126"><div id="inputTotal"></div></td>
      </tr>
    </form>
  </table>
  <p><font size="5">Aktionswoche: Bestellen Sie drei Aktions-Pizzen zum Preis
    von einer!<br>
    Nähere Informationen zu unserem Angebot erhalten Sie</font>
<a href="#" onClick="fensteropen()"><font size="5">hier</font></a>.</p>
</div>
</body>
</html>

Ciao
Quaese
 
Hi,

danke für die Antwort aber leider funktioniert das nicht richtig

erstmal der aktuelle code

HTML:
<script language="Javascript">
<!--
function calculateTotal() {
	var total = 0;

	// alle Checkboxes holen
	var checkboxes = document.getElementsByTagName("input"); 

    // über alle Checkboxes iterieren
	for(var i = 0; i < checkboxes.length; ++i) {
		
if(checkboxes[41].checked || checkboxes[42].checked  || checkboxes[43].checked || checkboxes[44].checked || checkboxes[45].checked || checkboxes[46].checked) {
	total += 1;
}
		
		if (checkboxes[i].checked && (checkboxes[i].name.search(/cb_extra/) == -1)) {
		    // wenn checkbox angewählt ist...
		    
		    // entsprechender Wert auslesen
			var s = checkboxes[i].parentNode.getElementsByTagName("input")[1].value;

			
			// , durch . ersetzen
			s = s.replace(",", ".");
			
			// in Gleitkommazahl umwandeln und zum total addieren
			total += parseFloat(s);
		}
	}
	
	// das ganze auf zwei Stellen nach dem Komma runden und in die Inputbox reinschreiben
	document.getElementById("inputTotal").value = (Math.round(total *100) / 100).toFixed(2);
}

//--></script>
</head>
<body>
<form name="kontakt" method="post" action="<?php $_SERVER['PHP_SELF']?>" enctype="multipart/form-data">
<div id="placer">
	<div id="header">
    	<div id="header_text">
        Stellen Sie sich Ihren Wunschsalat aus &uuml;ber 60 Zutaten zusammen.<br />
        Alle Salate werden mit Br&ouml;tchen geliefert. Die Lieferung erfolgt Frei Haus.
        </div>
        <div id="header_img"></div>
    </div>
	<div id="left">
    	<div id="basis">
        	<div id="basis_header">
            	<div id="eins">
                </div><span class="tab_text_span">BASISSALAT</span><br />
                W&auml;hlen Sie Ihren Basissalat. Wir empfehlen: pro Salat ca. 8 Zutaten.
          </div>
        	<div id="basis_cont">
              <div class="content">
              <div class="marg1" >
              <div id="basis_cont_cont_head">SALATBL&Auml;TTER</div>
                  <div id="basis_cont_cont_placer">
                    <div id="cont_inner"><input type="checkbox" name="Eisberg" value="Eisberg,"/>Eisberg</div>
                    <div id="cont_inner"><input type="checkbox" name="Ruccola" value="Ruccola,"/>Ruccola</div>
                    <div id="cont_inner"><input type="checkbox" name="Feldsalat" value="Feldsalat,"/>Feldsalat</div>
                    <div id="cont_inner"><input type="checkbox" name="Rotkohl" value="Rotkohl,"/>Rotkohl</div>
                    <div id="cont_inner"><input type="checkbox" name="Weisskohl" value="Weisskohl,"/>Weisskohl</div>
                    <div id="footer"></div>
                  </div>
              </div>
              <div class="marg1">
              <div id="basis_cont_cont_head">GEM&Uuml;SE</div>
                    <div id="basis_cont_cont_placer">
                   	<div id="cont_inner">
                    <input type="checkbox" name="Cherrytomaten" value="Cherrytomaten,"/>Cherrytomaten<br />
                    <input type="checkbox" name="Gurken" value="Gurken,"/>Gurken<br />
                    <input type="checkbox" name="Moehren" value="Moehren,"/>M&ouml;hren<br />
                    <input type="checkbox" name="Paprika_gelb" value="Paprika Gelb,"/>Paprika Gelb<br />
                    <input type="checkbox" name="Paprika_gruen" value="Paprika Gruen,"/>Paprika Gr&uuml;n
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Paprika_rot" value="Paprika Rot,"/>Paprika Rot<br />
                    <input type="checkbox" name="Champignons" value="Champignons,"/>Champignons<br />
                    <input type="checkbox" name="Mais" value="Mais,"/>Mais<br />
                    <input type="checkbox" name="Zwiebeln_rot" value="Zwiebeln Rot,"/>Zwiebeln Rot<br />
                    <input type="checkbox" name="Oliven_gruen" value="Oliven Gruen,"/>Oliven Gr&uuml;n
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Oliven_schwarz" value="Oliven Schwarz,"/>Oliven Schwarz<br />
                    <input type="checkbox" name="Gewuerzgurken" value="Gewuerzgurken,"/>Gew&uuml;rzgurken<br />
                    <input type="checkbox" name="Kartofflen" value="Kartofflen,"/>Kartofflen<br />
                    <input type="checkbox" name="Blumenkohl" value="Blumenkohl,"/>Blumenkohl<br />
                    <input type="checkbox" name="Paprika_gelb" value="Paprika Gelb,"/>Paprika Gelb
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Sellerie" value="Sellerie,"/>Sellerie<br />
                    <input type="checkbox" name="Fenchel" value="Fenchel,"/>Fenchel<br />
                    <input type="checkbox" name="Kohlrabi" value="Kohlrabi,"/>Kohlrabi<br />
                    <input type="checkbox" name="Radieser" value="Radieser,"/>Radieser<br />
                    <input type="checkbox" name="Kidney_bohnen" value="Kidney Bohnen,"/>Kidney Bohnen
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Broccoli" value="Broccoli," />Broccoli<br />
                    <input type="checkbox" name="Sprossen" value="Sprossen," />Sprossen
                    </div>
                    <div id="footer"></div>
              </div>
                <div class="marg1">
              <div id="basis_cont_cont_head">OBST</div>
                    <div id="basis_cont_cont_placer">
                    <div id="cont_inner"><input type="checkbox" name="Ananas" value="Ananas,"/>Ananas</div>
                    <div id="cont_inner"><input type="checkbox" name="Apfel" value="Apfel"/>Apfel</div>
                    <div id="footer"></div>
              </div>
              </div>
              <div class="marg1">
              <div id="basis_cont_cont_head">DRESSING</div>
                    <div id="basis_cont_cont_placer">
                      <div id="cont_inner">
                    <input type="checkbox" name="Vinaigrette" value="Vinaigrette,"/>Vinaigrette<br />
                    <input type="checkbox" name="Knoblauch" value="Knoblauch,"/>Knoblauch<br />
                    <input type="checkbox" name="Joghurt" value="Joghurt,"/>Joghurt
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Italien" value="Italien,"/>Italien<br />
                    <input type="checkbox" name="French" value="French,"/>French<br />
                    <input type="checkbox" name="Balsamico" value="Balsamico,"/>Balsamico
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="American" value="American,"/>American<br />
                    <input type="checkbox" name="Thousand_islnad" value="Thousand Islnad,"/>Thousand Islnad<br />
                    <input type="checkbox" name="Olivenoel" value="Olivenoel,"/>Oliven&ouml;l
                    </div>
                    <div id="cont_inner">
                    <input type="checkbox" name="Bio_balsamico" value="Bio Balsamico,"/>Bio Balsamico<br />
                    <input type="checkbox" name="Bio_french" value="Bio French,"/>Bio French<br />
                    <input type="checkbox" name="Bio_joghurt" value="Bio Joghurt,"/>Bio Joghurt
                    </div>
                    <div id="footer"></div>
              </div>
              </div>
              </div>
              </div>
              </div>
        </div>
        
        <div id="specials">
        	<div id="basis_header2">
            	<div id="zwei"></div><span class="tab_text_span">SIMSALATBIM SPECIALS</span><br />
                Verfeinern Sie Ihren Salat mit weiteren Zutaten.
            </div>
            <div id="basis_cont">
              <div class="content">
              <div class="marg1" >
              <div id="basis_cont_cont_head">BIO (einmalig +1,00€)</div>
                  <div id="basis_cont_cont_placer">
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_01" value="Champignon,"/>Champignon</div>
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_02" value="Cherrytomaten,"/>Cherrytomaten</div>
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_03" value="Gurken,"/>Gurken</div>
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_04" value="Moehren,"/>M&ouml;hren</div>
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_05" value="Feldsalat,"/>Feldsalat</div>
                    <div id="cont_inner"><input type="checkbox" name="cb_extra_06" value="Zwiebeln,"/>Zwiebeln</div>
                    <div id="footer"></div>
                  </div>
              </div>

so das problem ist das wenn ich jetzt 1 von den checkboxen anklicke wird plötzlich ein wert von 142.00 dazugerechnet statt einmalig 1 €
 
Hi,

der Test der Extra-Checkboxen hat auch nichts in der for-Schleife zu suchen. Vergleich mal mit meinem Quellcode.

Ciao
Quaese
 
Ah ok mein fehler gewesen ^^

Jetzt nur noch die frage wie stell ich es an das die sachen auch mit ausgegeben werden über

HTML:
total += parseFloat(1);

hat es nich funktioniert

leider sit nix bei rausgekommen das problem ist die sachen werden zwar addiert aber nicht in das entsprechende feld eingetragen erst wenn ich auf eines der checkboxen klicke die nicht nur einmal addiert werden wird der wert in das feld eingetragen
 
Zurück