특정 조건이 자바 스크립트에서 건너 뛰었습니다.

Question

텍스트 필드가 아닌 라디오 버튼과 체크 박스만으로 구성된 양식에서 값을 취하는 자바 스크립트 가격 계산기를 만들려고합니다.

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을 사용할 때 페이지가 새로 고쳐지지 않도록했습니다.

내 코드에 어떤 문제가 있는지, 왜 그런 일이 발생하는지 알지 못해서 솔루션과 함께 설명하면 도움이 될 것입니다. 여기에 전체 코드가 포함 된 코드 en을 찾을 수 있습니다. http://codepen.io/anshap1719/pen/pNjepV

Answer 1

break case로 각 사례를 스위치 케이스에 넣으십시오. 라디오 버튼 중 하나를 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

확인 콘솔해야한다, 내가로 그룹 1이 정의되지 않았다고 말합니다. 스위치에서 사용한 변수를 정의하지 않았습니다.

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

이렇게하면 필요한 출력이 제공됩니다.