Checkbox mit Wert prüfen und addieren

M

mdkai

Grünschnabel
Hallo ;)

Ich zerbreche mir den Kopf wie ich folgendes Problem lösen kann:

Ein Formular hat Reihen mit Checkboxen (jede box hat einen definierten Wert), diese sollen nach Bedarf angeklickt werden und dann am Ende per Button ein Ergebnis ausgeben.

[]Cola 1 €
[]Fanta 1,20 €
[]Milch 0,70€

Kosten= ?

Meine Überlegung war, jeder Box durch "value" den Zahlenwert zuzuweisen, und dann irgendwie abzufragen welche Boxen markiert sind, um am Ende den Wert zu berechnen.

Leider ist mein JS Wissen noch sehr jung und so ganz leicht fällt es mir noch nicht Probleme anzugehen.
Soll ich die checkbox per Eventhandler prüfen oder erst wenn die finale Berechnung losgeht ? Ist der capture.event(event.click) vielleicht eine Möglichkeit ?
Würde mich über Hilfe oder Tipps freuen.
 
Hi,

du könntest in den Checkboxen auf den onclick-Event reagieren. In einer Funktion prüfst
du, ob der Preis addiert oder subtrahiert werden muss. Anschliessend führst du die Berechnung
aus und aktualisierst das Ausgabefeld.
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
function calcPrice(objCheck){
  // Ermitteln, ob Preis addiert oder subtrahiert werden muss
  dblPreis = (objCheck.checked) ? Number(objCheck.value) : (-1)*Number(objCheck.value);
  // Aktuellen Endpreis in Zahl umwandeln und neuen Preis berechnen
  dblPreis = Number(objCheck.form.txtPreis.value.replace(/,/, ".")) + dblPreis;
  // Neuen Endpreis formatieren und in Textfeld ausgeben
  objCheck.form.txtPreis.value = dblPreis.toFixed(2).replace(/\./, ",");
}
//-->
</script>

</head>
<body>
<form action="" method="">
  <div>
    <input type="checkbox" onclick="calcPrice(this);" name="cola" value="1" />Cola (1,00 EUR)<br />
    <input type="checkbox" onclick="calcPrice(this);" name="fanta" value="1.2" />Fanta (1,20 EUR)<br />
    <input type="checkbox" onclick="calcPrice(this);" name="milch" value="0.7" />Milch (0,70 EUR)
  </div>
  <div><input type="text" name="txtPreis" value="0.00" /> EUR</div>
</form>
</body>
</html>
Ciao
Quaese
 
Danke für die Erklärung, hat mir weiter geholfen ;)

Jetzt habe ich aber noch eine andere Problematik entdeckt ..
Ich habe bei einem Bestellformular eine ähnliche Abfrage gemacht, allerdings etwas einfacher.

Das seltsame dabei ist der hohe Rundungsfehler, welchen ich mir absolut nicht erklären kann.
Z.B. Salami und Fungi ergeben bei mir "12.100000000000001" :eek:
Salami hat fast immer zusammen mit einer anderen Kombination so einen Fehler , aber warum ?
Hier der Code
Code: 
<html>
<head>
<title>Rechnung</title>

<script language="javascript"><!--


function calc(){

var ausgabe=0.00


if (document.forms[0].napoli.checked){
  ausgabe = ausgabe + 5.55
}
if (document.forms[0].fungi.checked){
  ausgabe = ausgabe + 5.95
}
if (document.forms[0].salami.checked){
  ausgabe = ausgabe + 6.15
}

if (document.forms[0].calzone.checked){
  ausgabe = ausgabe + 7.45
}
if (document.forms[0].salat.checked){
  ausgabe = ausgabe + 5.05
}

document.forms[0].kosten.value=ausgabe ;
    }




//--></script>

</head>


<body bgcolor="#ffffff" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">



  <table width="492" cellspacing="5" cellpadding="5" border="1" height="230" >

    <form>
      <tr>
        <td width="66">
          <input type="checkbox" name="napoli">
        </td>
        <td width="144"><font size="4">Pizza Napoli</font></td>
        <td width="126"><font size="4">&euro; 5,55</font></td>

      </tr>
      <tr>
        <td width="66">
          <input type="checkbox" name="fungi">
        </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" name="salami">
        </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"name="calzone">
        </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" name="salat">
        </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" name="kosten" >
        </td>
      </tr>
      <tr>
        <td colspan="2"> <font size="4">
          <input type="button" name="Button" onclick="calc()" 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">&nbsp;</td>
      </tr>
    </form>
  </table>

</body>
</html>

Für Hilfe wäre ich wieder dankbar
 
Diese Rundungsfehler kommen immer mal wieder vor und sind nicht unbedingt reproduzierbar (ich für meinen Teil bekomme keinen Fehler mit deinem Script).

Ich würde das ganze durch die Funktion toFixed() jagen, die auch gleich noch rundet.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück