2017-11-05 8 views
2

ラジオボタンを1つだけ選択した後、複数の入力に異なる値を追加するにはどうすればよいですか?

ユーザは性別(男性/女性)のみを入力し、コードは2つの異なる入力フィールドの "係数" 1と "係数2"を自動的に入力する必要があります。私は係数1のためにそれを行うことができましたが、係数2の私のコードは機能しません。 またはもっと簡単な方法があるかもしれません。

  • 係数1は、男性は1、女性は0.75である。
  • 係数2は、男性は1、女性は0.85です。

function getC2() { 
 
    var cc = parseFloat($("#kog").val()); 
 

 
    if (cc == 1){ 
 
     $('#kocc').val(1); 
 
    } 
 
    else { 
 
     $('#kocc').val("0.85"); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $('#kog').change(function(event) { 
 
     getC2(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75" onClick="document.getElementById('kog').value=this.value"> 
 
<label for="demo09a">female</label> 
 
<input type="radio" name="gender" id="demo09b" class="gender" value="1" onClick="document.getElementById('kog').value=this.value"> 
 
<label for="demo09b">male</label> 
 
<br /> 
 

 
<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 "> 
 
<label for="kog">Coefficient 1 </label> 
 
<br /> 
 

 
<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2"> 
 
<label for="kocc">Coefficient 2</label> 
 
<br />

答えて

4

さてあなたは、この例を参照してください$('input[name=gender]').click(function(e) {});を使用してラジオボタンの変更を処理するのは簡単だろうjqueryのを使用:

function getC2() { 
 
    var cc = parseFloat($("#kog").val()); 
 

 
    if (cc == 1){ 
 
    $('#kocc').val(1); 
 
    } 
 
    else { 
 
    $('#kocc').val("0.85"); 
 
    } 
 
    } 
 

 
    $(document).ready(function() { 
 
    $('input[name=gender]').click(function(e) { 
 
     $('#kog').val($(this).val()); 
 
     getC2(); 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="demo09a" class="gender" type="radio" name="gender" value="0.75"> 
 
    <label for="demo09a">female</label> 
 
    <input type="radio" name="gender" id="demo09b" class="gender" value="1"> 
 
    <label for="demo09b">male</label> 
 
    <br /> 
 

 
    <input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 "> 
 
    <label for="kog">Coefficient 1 </label> 
 
    <br /> 
 

 
    <input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2"> 
 
    <label for="kocc">Coefficient 2</label> 
 
    <br />

1

をあなたがました〜に正しいトラック。しかし、jQueryを使うと、より効率的になります。見てみましょう:愉し@

//lets set the event handlers 
 
$('input[type=radio].gender').click(function(e){ 
 
    //if the click comes from the female radio set coefficients differently 
 
    if ($(this).attr("id") == "demo09a")//female 
 
    { 
 
    $("#kog").val(0.75); 
 
    $("#kocc").val(0.85); 
 
    } 
 
    else 
 
    { 
 
    //male, select both id's and set to 1. 
 
    $("#kog, #kocc").val(1); 
 

 
    } 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="demo09a" class="gender" type="radio" name="gender"> 
 
<label for="demo09a">female</label> 
 
<input type="radio" name="gender" id="demo09b" class="gender" > 
 
<label for="demo09b">male</label> 
 
<br /> 
 

 
<input id="kog" type="text" name="Co1" readonly="true" placeholder="Coefficient 1 "> 
 
<label for="kog">Coefficient 1 </label> 
 
<br /> 
 

 
<input id="kocc" type="text" name="kocc" readonly="true" placeholder="Coefficient 2"> 
 
<label for="kocc">Coefficient 2</label> 
 
<br />

+0

- おかげで、それは本当にすてきなコードです! – Pussyfer

関連する問題