if else 문에서 함수를 작성할 수 있습니까?

Question

이것은 내 HTML과 JavaScript입니다.

라디오 버튼을 선택한 후 선택 옵션에서 값을 가져오고 싶습니다. 선택 옵션 값이 변경 될 때 옵션을 선택한 다음 if 문 내부 함수를 호출이 계산 :

<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio1" name="chbox" value="option1"> 
     <label for="radio1"> Section A (Preferred) 
      <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch1"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="a1" onchange="totalPrice()"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="a2" onchange="totalPrice()"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio2" name="chbox" value="option1"> 
     <label for="radio2"> Section B (Open, Middle) 
      <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch2"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="b1"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="b2"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio3" name="chbox" value="option1"> 
     <label for="radio3">Section C (Open, Side) 
      <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch3"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="c1"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="c2"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
</div> 
<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio1" name="chbox" value="option1"> 
     <label for="radio1"> Section A (Preferred) 
      <br/><span>Adult(12y +) $35.00<br/>Children(5-11y) $18.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch1"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="a1" onchange="totalPrice()"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="a2" onchange="totalPrice()"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio2" name="chbox" value="option1"> 
     <label for="radio2"> Section B (Open, Middle) 
      <br/><span>Adult(12y +) $25.00<br/>Children(5-11y) $15.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch2"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="b1"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="b2"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="radio radio-danger"> 
     <input type="radio" id="radio3" name="chbox" value="option1"> 
     <label for="radio3">Section C (Open, Side) 
      <br/><span>Adult(12y +) $18.00<br/>Children(5-11y) $10.00</span> </label> 
    </div> 
    <div style="display:none;" id="ch3"> 
     <div class="form-group"> 
      <label><strong>Children</strong> 
      </label> 
      <select class="form-control" id="c1"> 
       <?php for($i=0;$i<=50;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label><strong>Adult</strong> 
      </label> 
      <select class="form-control" id="c2"> 
       <?php for($i=1;$i<=100;$i++){ echo '<option value="'.$i. '">'.$i. ' people</option>'; } ?> 
      </select> 
     </div> 
    </div> 
</div> 
</div> 

와 자바 스크립트 코드를 :

$(document).click(function() { 
    var check1 = document.getElementById("radio1"); 
    var check2 = document.getElementById("radio2"); 
    var check3 = document.getElementById("radio3"); 
    if (check1.checked) { 
     $("#ch1").fadeIn(); 

     function totalPrice() { 
      var a1 = document.getElementById("a1").value | 0; 
      var a2 = document.getElementById("a2").value | 0; 
      var total = 0; 
      total = (a1 * 18) + (a2 * 35); 
      document.getElementById("adCost").value = total; 
      document.getElementById("total").value = total; 

     } 

    } else { 
     $("#ch1").fadeOut(); 
    } 
    if (check2.checked) { 
     $("#ch2").fadeIn(); 
    } else { 
     $("#ch2").fadeOut(); 
    } 
    if (check3.checked) { 
     $("#ch3").fadeIn(); 
    } else { 
     $("#ch3").fadeOut(); 
    } 
}); 

Answer 1

이것은 좋은 방법이 아닙니다. 이 함수를 호출 할 수있는 시나리오를 놓칠 수 있습니다. 이 경우 기능을 사용할 수 없습니다 (오류가 정의되지 않았습니다). 이러한 종류의 오류를 방지하려면 함수를 조건문에서 제외하십시오.