Eine bestimmte Bedingung wird in JavaScript übersprungen

Question

Ich versuche, einen JavaScript-Preisrechner, der Werte aus einem Formular, das keine Textfelder, sondern nur Radio-Buttons und Kontrollkästchen enthält. Hier ist mein JavaScript:

service = 0; 

var setPoint = function (elem) { 
    var $e = $(elem); 
    var points = $e.attr("data-points"); 
    switch ($e.attr("name")) { 
     case 'group1': 
      group1 = parseFloat(points); 
     case 'group2': 
      group2 = parseFloat(points); 
     case 'group4': 
      group4 = parseFloat(points); 
     case 'group5': 
      group5 = parseFloat(points); 
     case 'services': 
      if ($(elem).attr('checked1') == 'true') { 
       $(elem).attr("checked1", "false"); 
       service = parseFloat(service) - parseFloat(points); 
      } else { 
       $(elem).attr("checked1", "true"); 
       service = parseFloat(service) + parseFloat(points); 
      } 
    } 
} 

var calculatePoints = function() {  
    var total;  
    var values = [group1, group2, group4, group5, service]; 

    values.map(function (value) { 
     if (value == "" || value == undefined || value == NaN) { 
      value = 0; 
      return value; 
     } 
    }); 

    if (service == 0) { 
     window.alert("At least one service needs to be selected!"); 
     console.log("Service = 0"); 
    } else if (service <= 20) { 
     total = group1 + group2 + group4 + group5 + service; 
    } else if (service > 20 && service <= 40) { 
     total = group1 + group2 + group4 + group5 + (service * 0.8); 
    } else total = group1 + group2 + group4 + group5 + (service * 0.7); 

    console.log(total * 1000); 

    return false; 
} 

Aber irgendwie die bedingte Anweisung if (service==0) ist gar nicht funktioniert!

Ich rufe die SetPoints-Funktion mit Onclick-Methode in meinem HTML bei jedem Klick auf ein Formularfeld und CalculatePoints-Funktion mit onsubmit. Ich habe sichergestellt, dass die Seite bei der Verwendung von onsubmit nicht aktualisiert wird.

Ich weiß nicht, was ist falsch mit meinem Code und warum es passiert, so eine Erklärung zusammen mit Ihren Lösungen wäre mir sehr hilfreich. Sie finden hier einen Codepen mit komplettem Code: http://codepen.io/anshap1719/pen/pNjepV

Answer 1

Versuchen Sie, jeden Fall mit einer Break-Anweisung in den Schalterkasten zu beenden.

switch ($e.attr("name")) { 
    case 'group1': 
     group1 = parseFloat(points); 
     break; 
    case 'group2': 
     group2 = parseFloat(points); 
     break; 
    case 'group4': 
     group4 = parseFloat(points); 
     break; 
    case 'group5': 
     group5 = parseFloat(points); 
     break; 
    case 'services': 
     if ($(elem).attr('checked1') == 'true') { 
      $(elem).attr("checked1", "false"); 
      service = parseFloat(service) - parseFloat(points); 
     } else { 
      $(elem).attr("checked1", "true"); 
      service = parseFloat(service) + parseFloat(points); 
     } 
     break; 
} 

Answer 2

Sie müssen nur group1 ... group5 mit Nullen Ihre Variablen auch initialisieren, wie Sie mit service so tat, wenn eine der Auswahlknöpfe nicht chosed, nicht bekommen Sie Fehler zu trösten, zu sein, wie folgen:

service = group1 = group2 = group3 = group4 = group5 = 0; 

Answer 3

es auf Fehler

if ($(elem).attr('checked1') === 'true') { 
    // Code here, use triple === for conditional equality check 
} 

Answer 4

prüfen Konsole sein sollte, wie ich t sagt, dass group1 nicht definiert ist. Sie haben die Variablen, die Sie in switch verwendet haben, nicht definiert.

var service = 0, group1=0.0, group2=0.0, group4=0.0, group5=0.0; 

Dies gibt Ihnen die erforderliche Ausgabe.