mehrere checkboxen mit "and" abfragen

Hi, dass liegt wohl darann dass ich im verlinkten Beispiel jQuery verwende ( http://jquery.com/ )

Füg eifnach mal folgendes Im head-Bereich deiner seite hinzu:
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

Bei mir werden zZ alle Checkboxen gesucht und entsprechend addiert. Solltest du das nicht wollen, muss der Selektor ensprechend anders aussehen. jQuery ist da aber nicht schwer, schau dir eifach mal die Doku an: http://api.jquery.com/jQuery/
 
Muss er aber eigentlich.. poste mal edinen gesamten quellcode (oder noch besser: lade ihn auf einem testwebspace hoch)
 
Ich möchte sicherheitshalber noch mal nachfragen, ob dir dieser Aspekt aus #2 wirklich klar ist:

ComFreek hat gesagt.:
Beachte aber, dass du trotzdem serverseitig die Berechnungen erneut erledigen solltest, damit die Daten nicht gefälscht hochgeladen werden können.

Ein HTTP-Request ist vom Client völlig frei gestaltbar. Das heißt, alle GET-/POST-Parameter können auf beliebige Werte gesetzt werden. Selbst wenn du eine Gesamtsumme per JavaScript im Browser berechnest, ist das absolut keine Garantie dafür, dass mit dem Absenden des Formulars die korrekte Gesamtsumme mitgeschickt wird. Alles, was im Browser des Clients läuft, ist mit einfachsten Mitteln nahezu beliebig manipulierbar. (Und für das Absenden eines gefälschten Requests braucht es natürlich nicht mal einen Browser, also auch kein JavaScript.)
 
Hallo,
die Daten, die übermittelt werden sollen, sind keine Verkaufspreise die sich täglich ändern. Es wird so sein z.B. Brot kostet 3,50€, als option noch ein Hörnchen 2,50€ und die rechnerei soll nur dafür dienen. dass er informiert ist.

ps: wie kommt man zu einem testwebspace ? ist es sowas wo du das Programm abgelegt hast ?


so hier mein code:
Code:
<script type="text/javascript">

var updatePrice = function () {
    var price = 0;
    $("input:checked").each(function (index, element) {
        console.log(element);
        price += parseFloat($(element).attr("value"));
    });
    $("#gesamtkosten").text(price.toFixed(2) + " €"); // Zahl () sind die Nachkommastellen, #gesamtkosten ist die Ausgabe in der Tabelle
};

$("input[type=checkbox]").on("click", updatePrice); // bei klick einer checkbox neue Berechnung
</script>










<form name="kosten">
    <table width="100%" border="1" cellpadding="1" cellspacing="1">
        <tr>
            <th colspan="3" scope="col"><span class="Stil8">Preise sind pro Monat ohne MwSt.</span>
            </th>
            <th colspan="2" scope="col">
                <div align="left" class="Stil8">Optionen zubuchbar</div>
            </th>
        </tr>
        <tr>
            <td>Grundgebühren:</td>
            <td>3,50 €</td>
            <td>
                <input type="checkbox" name="cb1" value="3.50">
            </td>
            <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
            <td>Preis 1</td>
            <td>2,50 €</td>
            <td>
                <input type="checkbox" name="cb2" value="2.50">
            </td>
            <td colspan="2">Bild an <a href="mailto:info@resbar.de">info@resbar.de</a> schicken</td>
        </tr>
        <tr>
            <td>Preis 2</td>
            <td>0,50 €</td>
            <td>
                <input type="checkbox" name="cb3" value="0.50">
            </td>
            <td colspan="2" rowspan="6">&nbsp;</td>
        </tr>
        <tr>
            <td>Preis 3</td>
            <td>4,50 €</td>
            <td>
                <input type="checkbox" name="cb4" value="4.50">
            </td>
        </tr>
        <tr>
            <td>Kosten pro Monat</td>
            <td>
                <input type="text" name="anzeigen" size="5">
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>MwSt.:</td>
            <td>
                <input type="text" name="hallo" size="5">
            </td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Gesamtkosten inkl.</td>
            <td id="gesamtkosten">&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>Jahresgebühren inkl.</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</form>

Danke für Euere Bemühungen
Gruß
Rainer

Hallo,
es muß an jquery liegen. Hab das Programm auch mal bei jsfiddle geladen und da hat es zuerst auch nicht gerechnet, erst nach aktivierung von jquery lief es.
Deine Zeile habe ich aber im head

Gruß
Rainer
 
Hallo Rainer,

ich glaube du hast jQuery nicht oder nicht richtig eingbunden. Wenn du das hier 1:1 in die Seite übernimmst, sollte es auf jeden Fall gehen:

Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var gesamt = 0;

$("[type=checkbox]").click(function () {
	if (this.checked == true) {
		gesamt = gesamt + parseFloat(this.value);
	} else {
		gesamt = gesamt - parseFloat(this.value);
	}
	$("#gesamtkosten").text(gesamt.toFixed(2));
});

});
</script>
 
Hallo Thomas,
wieder einmal großes Dankeschön und natürlich auch an alxy, aber jetzt werden alle checkboxen abgefragt, alyx hat zwar geschrieben das es einfach ist nur die 3 abzufragen aber es ist nur einfach wenn man weiß wie :D.
habe mir das jquery zwar angeschaut aber sehr viel kann ich damit nicht anfangen. Naja morgen flieg ich erst mal nach Aserbaitschan, mal sehen ob ich dort etwas Zeit habe wohl eher nicht, dann hast Du (Ihr) Pause von mir :D

nochmals Danke
Gruß
Rainer
 
Wo du überall rumkommst!

Da es schnell gehen muss, hier auch gleich die Lösung wie du nur bestimmte Checkboxen abfragen kannst.

HTML:
<input type="checkbox" class="check" name="cb1" value="3.50">

Jede Checkbox die berücksichtigt werden soll, bekommst eine Klasse zugewiesen, class="check" (wobei die Bezeichnung "check" nur ein Beispiel ist und frei gewählt werden kann).

Dann änderst du mein obiges Beispiel so ab:


Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var gesamt = 0;

$(".check").click(function () {
    if (this.checked == true) {
        gesamt = gesamt + parseFloat(this.value);
    } else {
        gesamt = gesamt - parseFloat(this.value);
    }
    $("#gesamtkosten").text(gesamt.toFixed(2));
});

});
</script>
 
Zurück