jQuery 입력 필드 계산

Question

jQuery를 처음 사용하고 렌터카 비용에 대한 간단한 계산기를 만들려고합니다. 그것은 사람이 입력 한 숫자를 받아야하고, 클릭 할 때 그들이 선택한 자동차의 가치로 곱해야합니다. 아래는 내가 가진 무엇 :
변경이 코드 var a = $('input[name=type]:checked').val();-var a = $('select[name=type]').val(); : 여기

<form> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <label>CAR</label> 
      </div> 
      <div class="col-sm-8"> 
       <label><input name="type" value="800" type="radio"> Mercedez Benz</label> 
       <label><input name="type" value="800" type="radio"> Lexus LS 300h</label> 
       <label><input name="type" value="800" type="radio"> Audi A4 Avant</label> 
       <label><input name="type" value="800" type="radio"> BMW 535i</label> 
       <label><input name="type" value="1000" type="radio"> Premium</label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <label>KM</label> 
      </div> 
      <div class="col-sm-8"> 
       <label><input type="text" class="kilo" name="kilo">km</label> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-sm-4">Total</div> 
      <div class="col-sm-8"> 
       $<p id="total"></p> 
      </div> 
     </div> 
     <a class="calc-button" href="#">Count</a> 
    </form> 

을 그리고 것은 내가

<script> 
$(document).ready(function(){ 
    $('.calc-button').on('click', function() { 
     var a = $('select[name=type]').val(); 
     var b = $('input[name=kilo]').val(); 
     var total = a * b; 
     $('#total').text(total); 
    }     
); 
}); 
</script> 

Answer 1

은 아래에 언급 된 변화를 시도 동작하지 않습니다 내 JQuery와있다.

$(document).ready(function(){ 
 
    $('.calc-button').on('click', function() { 
 
     var a = $('input[name=type]:checked').val(); 
 
     
 
     var b = $('input[name=kilo]').val(); 
 
     
 
     var total = a * b; 
 
     $('#total').text(total); 
 
    }     
 
); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <label>CAR</label> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <label><input name="type" value="800" type="radio"> Mercedez Benz</label> 
 
       <label><input name="type" value="800" type="radio"> Lexus LS 300h</label> 
 
       <label><input name="type" value="800" type="radio"> Audi A4 Avant</label> 
 
       <label><input name="type" value="800" type="radio"> BMW 535i</label> 
 
       <label><input name="type" value="1000" type="radio"> Premium</label> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <label>KM</label> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <label><input type="text" class="kilo" name="kilo">km</label> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4">Total</div> 
 
      <div class="col-sm-8"> 
 
       $<p id="total"></p> 
 
      </div> 
 
     </div> 
 
     <a class="calc-button" href="#">Count</a> 
 
    </form>

Answer 2

여기 .. ​​Fiddle

$(document).ready(function(){ 
 
    $('.calc-button').on('click', function() { 
 
     var a = $('input[name=radioName]:checked').val(); 
 
     var b = $('input[name=kilo]').val(); 
 
     var total = a * b; 
 
     $('#total').text(total); 
 
    }     
 
); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm"> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <label>CAR</label> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <label><input name="radioName" value="800" type="radio"> Mercedez Benz</label> 
 
       <label><input name="radioName" value="800" type="radio"> Lexus LS 300h</label> 
 
       <label><input name="radioName" value="800" type="radio"> Audi A4 Avant</label> 
 
       <label><input name="radioName" value="800" type="radio"> BMW 535i</label> 
 
       <label><input name="radioName" value="1000" type="radio"> Premium</label> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <label>KM</label> 
 
      </div> 
 
      <div class="col-sm-8"> 
 
       <label><input type="text" class="kilo" name="kilo">km</label> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-sm-4">Total</div> 
 
      <div class="col-sm-8"> 
 
       $<p id="total"></p> 
 
      </div> 
 
     </div> 
 
     <a class="calc-button" href="#">Count</a> 
 
    </form>