Checkboxen berechnen lassen

1. offizieller Beitrag

    Hey,

    ich brauche hilfe bei einer Sache. Nämlich habe ich in meinem Bestellformular 4 Checkboxen. Ich möchte das wenn man eine Checkbox klickt , dass dann in einem span element der Preis ausgegeben wird. Und wenn man weitere Checkboxen klickt, dass der Preis dann addiert wird.

    Mein HTML & CSS:

    Ich habe im internet schon geschaut aber das was ich gefunden habe, hat entweder nicht funktioniert oder das erklärte hab ich nicht verstanden.


    Freue mich auf eure Hilfe.
    Stef

    Hey,

    @Arne : aus der value im input feld möchte ich die her haben , aber ich weis nicht wie man dies nun berechnet.

    djheke : ich habe kein geld für eine shopsoftware und möchte es selbst verstehen und eines tages selbst erstellen. Aber danke für den Tipp.

    Hoffe ihr könnt mir einen hilfreichen code vorlegen.

    Stef

    • Offizieller Beitrag

    Also wenn die Werte in den Values stehen, musst Du ja nur auf das Click-Event reagieren.
    Ich würde für den Fall ( wenn ich es auf die Art machen müsste ) einfach eine Summe aller Checkboxen ziehen und alle Werte der nicht gecheckten Boxen davon abziehen.
    Dann hast Du einen sauberen Start. Bei jedem Klick auf eine Checkbox prüfst Du dann, ob der Wert erneut zur Summe hinzugefügt oder abgezogen werden muss.

    Live, ohne Seiten-Reload benötigst Du JavaScript oder ein darauf basierendes Framework, wenn's komfortabler sein soll.
    Hast Du es mit einer der Varianten schon probiert oder ne Idee der Umsetzung?

    EDIT: kleines Beispiel ( ohne Rücksicht auf die Rundungsproblematik )
    http://www.php-rocks.de/checkcalcdemo/

    Hey,

    Ok.

    Ich habe nun schon die values zu jedem input zugeordnet.
    Ich habe mit JS nochnichts zu tun gehabt. Und weis daher nicht wie sowas aufgebaut ist. Bin aber für neueres immer begeistert.

    Meine Idee der Umsetzung ist:

    zu erst prüfen ob die Checkbox geklickt wurde. Falls ja, diesen klick wie du gesagt hast oben abfangen und die value angeben mit nem Text (z.B. so : Es kostet : ...€) und wenn mehrere geklickt werden addieren und falls die wieder weggeklickt werden summieren. Aber wie ich es umsetze weis ich nicht. Ich weiß nur dass man die Tags/IDS/Klassen idividuell ansprechen muss damit dies nur eine wirkung für diesen bereich hat und wie man eine javascript datei in html einbindet.

    Bin immer bereit neues zu lernen.
    ___________________________________________

    Dein Beispiel habe ich mir angesehen und so in etwa ist das was ich will aber ich verstehe schon beim anblick des js codes nicht wie er funktioniert.
    Ich erkläre mal den code soweit ich weis:

    Stef

    • Offizieller Beitrag

    Hallo,

    Ja, im groben hast Du ja verstanden wie das Script abläuft.
    Nochmal kurz etwas ausführlicher:

    Wie gesagt, auf die Rundungen habe ich der Kürze halber keine Rücksicht genommen.

    Hey,

    ok vielen Dank.

    Wenn ich es jetzt benutz, dann sind es mehr als 2 Kommanachstellen, wie kann ich diese auf 2 Stellen nach Komma setzen?
    Und wenn ich nun z.b. 3 checkboxen anklicke tut es dies auch richtig verrechnen aber wenn ich wieder es summiere dann kommen, Zahlen mit sehr vielen Nachkommazahlen und dann wenn alle checkboxen weggeklickt sind kommt sowas raus : -1.7763568394002505e-15 . Warum denn das ?

    Ne Frage zu dem: Warum wird vor dem checked ein this. benutzt ?

    PHP
    function sumvalue() {


    if ( this.checked ) 
        _summe += parseFloat( this.value );
    else
        _summe -= parseFloat( this.value ); //Warum ist nach dem - und + ein = ?
 document.getElementById( 'summe' ).innerHTML = _summe;


    Stef

    Einmal editiert, zuletzt von Stef (1. Juli 2016 um 19:06)

    • Offizieller Beitrag

    Hallo,

    Das this referenziert ein Objekt, in diesem Fall ist es das angeklickte Element, Deine Checkbox.
    Über den Event-Trigger ist das Element bekannt und kann mit this referenziert werden.

    Das Problem mit den Nachkommastellen soll man angeblich mit toFixed(2) oder Math.round() lösen können.
    Die Mühe habe ich mir allerdings nicht weiter gemacht, weil es auf die Schnelle zu falschen Ergebnissen kam... Evtl. habe ich das kurz falsch eingesetzt, keine Ahnung... :)

    Code
    _summe += 1 // ist dasselbe, wie _summe = _summe + 1
_summe -= 1 // ist dasselbe, wie _summe = _summe - 1


    bin halt schreibfaul...
    ;)

    Aso ok.

    Es funktioniert jetzt so in etwa. Habe math.round genommen:

    PHP
    document.getElementById( 'summe' ).innerHTML = 'Es kostet:' + Math.round(_summe) + '€';

    Vielen Dank :)

    Es funktioniert jetzt so in etwa. Habe math.round genommen:

    PHP
    document.getElementById( 'summe' ).innerHTML = 'Es kostet:' + Math.round(_summe) + '€';

    Vielen Dank :)

    • Offizieller Beitrag

    Ok, bei mir hat Math.round auf die einfache Sache nicht viel genützt.
    Habe eben mal selber kurz gesucht und eine genauere Lösung gefunden:

    Code
    Math.round( (_summe + 0.001) * 100 ) / 100;


    Das jetzt aber jedesmal zu schreiben, empfinde ich als lästig und ein wenig Verstoß gegen das DRY-Prinzip.

    Wenn Du das aber über einen Prototypen definierst, macht es wieder Sinn:


    Jetzt könnest Du auf jede Fliesskommazahl die Rundung vornehmen, bspw.:

    Code
    _summe.roundDecimal(2);


    Dann klappt das auch mit der Subtraktion.

    Viel Spaß
    :)

    Hey,

    habe nun den prototypen hinzugefügt und zu summe das roundDecimal (2).
    Es klappt nun wies sein soll :)

    Letzte Frage: Könntest du den Prototypen bitte erklären ?

    Gruß,
    Stef

    • Offizieller Beitrag

    Im Prinzip ist die Prototype-Funktion nicht ganz korrekt, denn sie arbeitet eigentlich ausschließlich für zwei Dezimalstellen, daher könnte man den Parameter dec_cnt auch weglassen und mit einem festen Wert anstelle von _deccnt arbeiten.

    Müsste eher so in etwa aussehen:

    PHP
    Number.prototype.roundDecimal = function( dec_cnt ) {


    _roundfactor = Math.pow( 10, dec_cnt );
    return Math.round( this * _roundfactor ) / _roundfactor;


}

    Die Besonderheit bei Math.round ist, dass immer zur nächsten Ganzzahl aufgerundet wird:

    PHP
    Math.round( 1.4 ) // ergibt: 1
Math.round( 1.5 ) // ergibt: 2


    Um jetzt auf zwei Nachkommastellen runden zu können, multipliziert man den Wert mit 100 ( 10² ) und führt darauf ein Math.round() aus.
    Das Ergebnis teilt man dann wieder durch denselben Faktor ( 100 ) und erhält den gerundeten Wert auf zwei Nachkommastellen.

    Hier mal kurz der Rechenweg Schritt für Schritt:

    PHP
    // Ausgangswert
var _wert = 1.578;


// mit 100 ( 10² ) multiplizieren, für 2 Nachkommastellen
_ergebnis = Math.round( _wert * 100 ); // = Math.round( 157.8 ) = 158


// _ergebnis wieder durch 100 ( 10² ) teilen, um aus dem Integer ein Float mit 2 Nachkommastellen zu erzeugen
_ergebnis = _ergebnis / 100; // = 1.58


    Man kann da allerdings noch viel mehr draus machen, denn so super genau ist auch das nicht.
    ;)

    Ich bins nochmal.

    Habe noch ein Problem.

    Ich habe mehrere input tag names (nicht nur für diese Rechnung) nun wenn ich aber alle anspreche und eine input type="text" habe z.b. und da drauf klick dann kommt beim preis NaN€.
    Wie kann man dies umgehen?

    Stef

    Hey,

    ok. wie setzt man die abfrage speziell auf den Typ des Input elements in js ?

    Stef

    • Offizieller Beitrag

    Hallo,

    Die Abfrage ist bereits enthalten, nur ist der Event-Listener ausserhalb dieser gesetzt.
    Da müsstest Du das einfach umbauen: