JavaScriptで特定の条件がスキップされています

Question

テキストフィールドではなくラジオボタンとチェックボックスのみからなるフォームから値を取るJavaScript価格計算機を作ろうとしています。ここに私の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; 
} 

しかし、どういうわけか、条件文if (service==0)はまったく機能していません！

フォームフィールドをクリックするたびにHTMLのonclickメソッドを使用してsetPoints関数を呼び出し、onsubmitを使用してcalculatePoints関数を呼び出します。 onsubmitを使用しているときにページが更新されないことを確認しました。

私のコードに何が間違っているのか、なぜそれが起こっているのか分かりませんので、あなたのソリューションと一緒に説明してくれれば助かります。ここで完全なコードを持つコードペインを見つけることができます。http://codepen.io/anshap1719/pen/pNjepV

Answer 1

ブレイクステートメントで各ケースをスイッチケースに入れてみます。ラジオボタンのいずれかがchosedされていない場合

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

はあなただけだけでなく、あなたがserviceと同じように、あなたの変数group1 ... group5ゼロで初期化する必要があるので、あなたがのように、エラーコンソール取得していません従い

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

Answer 3

それは

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

Answer 4

iと、エラーのコンソールをチェックする必要がありますグループ1は定義されていません。 switchで使用した変数は定義していません。

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

これにより、必要な出力が得られます。