Javascript mehrere Checkboxen automatisch addieren

[Kludde77]

Hallo,
sorry, dass ich gleich mit einer Frage auftauche. Ich habe mehret Checkboxen und möchte, dass ich die Beträge in value addieren. Es funktioniert, aber wenn ich dann wieder eine andere Checkbox davor auswähle, wird diese wieder addiert. Ich hoffe, dass ich mich halbwegs verständlich ausgedrückt habe und mir jemand gütigerweise hilft.

Hier der Code:

<script type="text/javascript">
function updatePreis(neuerPreis)
{
alterWert = parseFloat(document.getElementById("preis").value);
neuerWert = parseFloat(neuerPreis);
document.getElementById("preis").value = (alterWert +
neuerWert).toString();
}

</script> 

<form name="Konfigurator" action="cover-select">
           
            <div id="cartItems" class="cartBox">
              <p><span id="deliveryTitle" class="title">Hier können Sie auswählen, ob Sie ihr Cover personalisieren möchten.</span></p>
              <p>&nbsp; </p>
              <div class="cartDeliveryCont"><fieldset id="deliveryContainer" class="container">
            
            <div id="shippingContribstandard"><span class="contribButton">
            
            <label for="delivery1"></span><span class="contribInfo"><input type="hidden" name="cover1" 
value="Cover ohne Personalisierung" id="cover-select1" class="hidden"/>Cover ohne Personalisierung</span><div class="contribDefaultPrice">
             
			<input type="radio" name="cover" value="0" id="cover0" class="radio" onChange="updatePreis(cover0.value);" 
checked=""/><span>EUR 0,00</span></label></div></div>
            
            <div id="shippingContribstandard"><span class="contribButton">
            
            <label for="delivery1"></span><span class="contribInfo"><input type="hidden" name="cover2" value="Personalisierung mit Logo" 
id="cover-select2" class="hidden"/>Personalisierung mit Logo</span><div class="contribDefaultPrice">
             
			<input type="radio" name="cover" value="5" id="cover5" class="radio" onChange="updatePreis(cover5.value);"/><span>
EUR 5,00</span></label></div></div>
            
            <div class="contribution" id="shippingContribexpress"><span class="contribButton">
            
            <label for="delivery2"></span><span class="contribInfo"><input type="hidden" name="cover33" value="Personalisierung mit Foto" 
id="cover-select3" class="hidden"/>Personalisierung mit Foto</span><div class="contribDefaultPrice">
             
			<input type="radio" name="cover" value="10" id="cover10" class="radio" onChange="updatePreis(cover10.value);"/><span>
EUR 10,00</span></label></div></fieldset><span class="clear"></span></div></div>
            
        </form>

<form name="Konfigurator" action="delivery">
            <span class="titleContent">Versandart</span></div> <div class="cartDeliveryCont"><fieldset id="deliveryContainer" class="container">
            
            <div class="contribution selected" id="shippingContribstandard"><span class="contribButton">
            
            <label for="delivery1"><span>Standard</span></span><span class="contribInfo"><input type="hidden" name="delivery1" 
value="Lieferung innerhalb von 4-6 Arbeitstagen" id="delivery1" class="hidden"/>Lieferung innerhalb von 4-6 Arbeitstagen</span><div class="contribDefaultPrice">
             
			<input type="radio" name="delivery" value="7" id="delivery7" class="radio" onChange="updatePreis(delivery7.value);" 
checked=""/><span>EUR 7,00</span></label></div></div>
 <div class="contribution" id="shippingContribexpress"><span class="contribButton">
            
            <label for="delivery2"><span>Express</span></span><span class="contribInfo"><input type="hidden" name="delivery2" 
value="Lieferung innerhalb von 2-3 Arbeitstagen" id="delivery4" class="hidden"/>Lieferung innerhalb von 2-3 Arbeitstagen</span>
<div class="contribDefaultPrice">
             
			<input type="radio" name="delivery" value="5" id="delivery13" class="radio" onChange="updatePreis(delivery13.value);"/>
<span>EUR 13,00</span></label></div></div></fieldset></div><br /><br /><br />
</form>
<div id="orderTotal"><br /><br />
                
              <span class="priceTotal">Gesamtbetrag</span><span style="float:right">EUR<input id="preis" name"preis" type="text" value="37" 
style="font-weight:bold; color:black;"></span></div>

[chorn]

Du musst halt vorher prüfen, ob die Checkbox aktiviert oder deaktiviert wurde, dann ist es eine Addition oder eine Subtraktion. Oder du gehst di Checkboxen jedes Mal alle durch und addierst nur die aktivierten.

[Kropff]

Bitte brich vorher deinen Code um! Kein Mench scrollt gerne horizontal.

Danke
Peter

[Kludde77]

Bitte brich vorher deinen Code um! Kein Mench scrollt gerne horizontal.

Danke
Peter

Danke, gemacht

[Kludde77]

Du musst halt vorher prüfen, ob die Checkbox aktiviert oder deaktiviert wurde, dann ist es eine Addition oder eine Subtraktion. Oder du gehst di Checkboxen jedes Mal alle durch und addierst nur die aktivierten.

Sorry, aber bin nicht so erfahren. Wie kann ich das am Besten vornehmen?
Danke für deine Hilfe!!

[chorn]

Dann bau dir doch erstmal eine Schleife die dir alle Checkboxen liefert, prüfe mit alert() ob die Namen richtig sind, sonst filtere nach Klaase oder ähnlichem Merkmal, wie das geht dazu gibt es haufenweise Tutorials bei Google, z.B.

https://www.google.com/search?q=java...boxen+addieren

zweiter Eintrag, php.de, JQuery kann dir da auch helfen.

[AmicaNoctis]

Hallo,

deine updatePreis-Funktion hat keinerlei Informationen darüber, ob die Checkbox die sich geändert hat, jetzt aktiviert oder deaktiviert wurde, sondern addiert fröhlich weiter. Wenn du also die 5,-€-Checkbox aktivierst und wieder deaktivierst, sind es schon 10,-€.

Übergib der Funktion einfach this ([FONT="Courier New"]onclick="updatePrice(this)"[/FONT]) und schreib die updatePrice-Funktion so um, dass sie die Checkbox als Parameter erwartet, dann kannst du in der Funktion mit [FONT="Courier New"]checkbox.checked[/FONT] überprüfen, ob sie aktiv ist und mit [FONT="Courier New"]checkbox.value[/FONT] ihren Wert auslesen.

Gruß,

Amica

[Kludde77]

Hallo,

deine updatePreis-Funktion hat keinerlei Informationen darüber, ob die Checkbox die sich geändert hat, jetzt aktiviert oder deaktiviert wurde, sondern addiert fröhlich weiter. Wenn du also die 5,-€-Checkbox aktivierst und wieder deaktivierst, sind es schon 10,-€.

Übergib der Funktion einfach this ([FONT="Courier New"]onclick="updatePrice(this)"[/FONT]) und schreib die updatePrice-Funktion so um, dass sie die Checkbox als Parameter erwartet, dann kannst du in der Funktion mit [FONT="Courier New"]checkbox.checked[/FONT] überprüfen, ob sie aktiv ist und mit [FONT="Courier New"]checkbox.value[/FONT] ihren Wert auslesen.

Gruß,

Amica

Hallo Amica,
danke für deine Hilfe, leider probiere ich jetzt schon seit 2 Stunden rum, leider aber ohne sinnvolles Ergebnis. Hättest du vielleicht erbarmen mit mir und könntest mir ein wenig weiterhelfen?
Danke
lg
Kludde

[AmicaNoctis]

Als ich noch dachte, dass es um Checkboxen ging, wie du sagtest, schwebte mir sowas hier vor:

function updatePreis (checkbox) {
    var neuerPreis = checkbox.value - 0;
    if (checkbox.checked) {
        neuerPreis = -neuerPreis;
    }
    // hier dein anderer Code
}

Aufruf über onchange="updatePreis(this)"

Da ich aber im Code eben gesehen habe, dass es Radiobuttons sind, weiß ich grad nicht, ob das so in allen Browsern funktioniert, also ob der onchange-Event auch beim Abwählen des bisherigen Knopfes feuert. Notfalls musst du wirklich alle durchgehen und gucken, welcher aktiv ist (document.getElementsByName("cover")).