將單選按鈕選擇的值複製到文本框

Question

我試圖將所選單選按鈕的值複製到文本框中顯示。但是，我無法得到這個工作。我在下面複製了我的代碼。

有人能幫我嗎？

function sync() 
 
{ 
 
    var n4 = document.getElementById('n4').checked; 
 
    var n1 = document.getElementById('n1'); 
 
    n1.value = n4.value; 
 
}

<form action="" id="n4" onkeyup="sync()"> 
 
    <input type="radio" name="gender" value="male" id"4" onkeyup="sync()"> Male<br> 
 
    <input type="radio" name="gender" value="female" onkeyup="sync()"> Female<br> 
 
    <input type="radio" name="gender" value="other" onkeyup="sync()"> Other 
 
</form> 
 

 
<input type="text" name="n1" id="n1" >

Answer 1

請使用以下設定值。根據你的代碼，你只是爲對方分配值。

function sync() 
{ 
var n4 = document.getElementById('n4').checked; 
    document.getElementById("n1").value = n4; 
} 

Answer 2

我改變了一些代碼。首先我使用了onchange事件。 之後，我創建了一個具有相同類名的單選按鈕數組。 每次單選按鈕發生變化時，它都會循環並返回輸入字段中的選中值。

function sync() { 
 
    var radios = document.getElementsByName('gender'); 
 
    for(var i = 0; i < radios.length; i++){ 
 
    if(radios[i].checked){ 
 
     n1.value = radios[i].value; 
 
    }; 
 
    }; 
 
};

<form action="" id="n4" onkeyup="sync()"> 
 
<input type="radio" name="gender" value="male" id"4" onchange="sync()"> Male<br> 
 
<input type="radio" name="gender" value="female" onchange="sync()"> Female<br> 
 
<input type="radio" name="gender" value="other" onchange="sync()"> Other 
 
</form> 
 

 

 
<input type="text" name="n1" id="n1" >

Answer 3

function sync(el) 
 
{ 
 
    var n1 = document.getElementById('n1'); 
 
    n1.value = el.value; 
 
}

<form action="" id="n4"> 
 
    <input type="radio" name="gender" value="male" id"4" onchange="sync(this)"> Male<br> 
 
    <input type="radio" name="gender" value="female" onchange="sync(this)"> Female<br> 
 
    <input type="radio" name="gender" value="other" onchange="sync(this)"> Other 
 
</form> 
 

 
<input type="text" name="n1" id="n1" >

使用onchange並通過元素，並從中獲得價值。