Onni: Werte neben Checkboxen mit Javascript addieren

SELF-Forum

Werte neben Checkboxen mit Javascript addieren

Onni
– Informationen zu den Bewertungsregeln

Hallo,
ich habe ein Dokument bzw. eine Tabelle mit Checkboxen.
Hinter diesen Checkboxen befinden sich Euro Beträge.
Wenn sich ein Kunde eine Pizza bestellt und die
gewünschte Zutat in der Checkbox anklickt, dann will ich,
dass er beim anklicken eines Button im unteren Bereich
in einem danebenstehenden Feld die Summe der einzeln
angeklickten Beträge sieht.
Das HTML Dokument habe ich fertig, fehlt noch die JavaScript Anweisung??????????????????????????????

Anbei eine Zeile der Zutaten im Body Bereich

<tr>
        <td width="66">
          <input type="checkbox"value="checkbox">
        </td>
        <td width="144"><font size="4">Knoblauch</font></td>
        <td width="126"><font size="4">&euro; 0,50</font></td>
      </tr>
      <tr>

und hier die Tabellenzeile mit den Buttons:

<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>

Vielen Dank im Voraus.:)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Werte neben Checkboxen mit Javascript addieren

    Rouven
    – Informationen zu den Bewertungsregeln

    Hi,

    <td colspan="2"> <font size="4">

    zunächst mal, das font-Tag ist veraltet (HTML 4) und sollte durch ein Stylesheet ersetzt werden, da es, analog b, i und sonstigen Sachen wenig mit der Auszeichnung sondern mehr mit Layout zu tun hat.

    Ansonsten könntest du es dir (bzw. JavaScript) sehr viel einfacher machen, wenn du die Werte die addiert werden sollen besser auffindbar machst.
    Eine Möglichkeit wäre ein
    <div id="preis1">4.50</div>
    Mittels document.getElementById("preis1") kommst du an das div. Dessen textuellen Inhalt kann man dann recht einfach über die Kinderknoten ermitteln, siehe z.B. das entsprechende SelfHTML-Kapitel.
    Ich nehme ja an, du kannst das ganze _nicht_ über den value der Checkbox machen, oder? Das wäre sonst der einfachste Weg. Wenn das nicht gelingt könntest du noch für jede Checkbox ein entsprechendes <input type="hidden"> platzieren und dir dort den Wert rausangeln.

    MfG
    Rouven

    --
    -------------------
    ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:(
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Werte neben Checkboxen mit Javascript addieren

    Konstantin
    – Informationen zu den Bewertungsregeln

    ich hab mal ohne Nachzudenken ein Sample geschrieben - hope that helps!

    Gruß,
    Konstantin

    <html>
    <head>
    <script>
    var Zutaten = new Object();
    function toggleZutat(checkbox) {
      if(checkbox.checked) {
        Zutaten[checkbox.name] = parseFloat(checkbox.value);
      }
      else {
        Zutaten[checkbox.name] = null;
      }
      showZutaten();
    }

    function showZutaten() {
      var zutat;
      var price = 0.0;
      var arr = new Array();
      for(Zutat in Zutaten) {
        if(Zutaten[Zutat]) {
       arr[arr.length] = Zutat;
       price+=Zutaten[Zutat];
       }
      }

    if(arr.length>0) {
        document.getElementById("Zutaten").innerHTML = "Ausgew&auml;hlte Zutaten: " + arr.join(", ") + " (&euro; " + price + ")";
      }
      else {
        document.getElementById("Zutaten").innerHTML = "Keine Zutaten ausgew&auml;hlt"
      }
    }

    </script>
    </head>
    <body>
    <table>
    <tr>
      <td width="66">
        <input type="checkbox" name="Knoblauch" value="0.5" onclick="toggleZutat(this);">
      </td>
      <td width="144"><font size="4">Knoblauch</font></td>
      <td width="126"><font size="4">&euro; 0,50</font></td>
    </tr>

    <tr>
      <td width="66">
        <input type="checkbox" name="Salami" value="0.5" onclick="toggleZutat(this);">
      </td>
      <td width="144"><font size="4">Salami</font></td>
      <td width="126"><font size="4">&euro; 0,50</font></td>
    </tr>

    <tr>
      <td width="66">
        <input type="checkbox" name="Meeresfr&uuml;chte" value="1.0" onclick="toggleZutat(this);">
      </td>
      <td width="144"><font size="4">Meeresfr&uuml;chte</font></td>
      <td width="126"><font size="4">&euro; 1,00</font></td>
    </tr>

    <tr>
      <td width="66">
        <input type="checkbox" name="Shrimps" value="1.5" onclick="toggleZutat(this);">
      </td>
      <td width="144"><font size="4">Shrimps</font></td>
      <td width="126"><font size="4">&euro; 1,50</font></td>
    </tr>

    </table>
    <div id="Zutaten"></div>

    </body>
    </html>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln