Wie können nach Auswahl eines Optionsfelds mehrere Werte zu mehr als einem Eingang hinzugefügt werden?

Question

Ich habe dieses Problem:

Der Benutzer gibt nur Geschlecht (männlich/weiblich) und der Code muss automatisch füllen die "Koeffizient" 1 und "Koeffizient 2" in zwei verschiedenen Eingabefelder. Ich schaffte es für Coefficient 1, aber mein Code für Coefficient 2 funktioniert nicht. Oder vielleicht gibt es einen besseren und einfacheren Weg.

• Koeffizient 1 ist 1 für männlich und 0,75 für weiblich.
• Koeffizient 2 ist 1 für männlich und 0,85 für weiblich.

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 />

Answer 1

Nun verwendet man jquery es wäre leicht, das Optionsfeld ändern zu handhaben mit $('input[name=gender]').click(function(e) {}); siehe folgendes Beispiel:

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 />

Answer 2

Sie waren auf der richtiger Weg. Aber mit jQuery können Sie immer effizienter sein. Werfen Sie einen Blick:

//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 />