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>