如何使用javascript单选按钮将文本添加到输入区域

How to add text into input area with javascript radio button

本文关键字：添加 输入 区域 文本 何使用 javascript 单选按钮      更新时间：2023-09-26

我正在尝试实现一个功能，用户可以通过单选按钮选择一个选项，然后将值添加到输入文本框中。

我用了onClick，但效率不够。

/*
button
<div onClick="    
document.forms['name_of_ the_form']['name_of_the_ input'].value += 'text you want to add to it'" > button </div> 
*/

这就是您可以做的：

var radioArray = document.getElementsByName("radio");
for (i = 0; i < radioArray.length; i++) {
    radioArray[i].onclick = alertText;
}
function alertText () {
    document.getElementById("text").innerHTML = this.value;
}

实时版本：http://jsfiddle.net/mankinchi/sL4cfj7r/

alertText函数中的"this"将指已单击的实际元素。

您可以使用一点jQuery来轻松实现这一点。

HTML:

<input type="radio" name="radio" value="Something">Something
<input type="radio" name="radio" value="Something 2">Something 2
<input type="radio" name="radio" value="Something 3">Somethign 3
<textarea id="target"></textarea>

JS:

$(document).ready(function(){
    $('input[name=radio]:radio').on('change', function() {
        $('#target').val( $(this).val() );
    });
});

http://jsfiddle.net/1an0p4z6/

-----非jQuery----

HTML:

<input type="radio" name="radio" class="radio" value="Something">Something
<input type="radio" name="radio" class="radio" value="Something 2">Something 2
<input type="radio" name="radio" class="radio" value="Something 3">Somethign 3
<textarea id="target"></textarea>

JS:

var buttons = document.querySelectorAll('.radio');
for( i=0; i<buttons.length; i++ ) {
    buttons[i].addEventListener('change',function(){
        document.querySelector('#target').value = this.value;
    });
}

http://jsfiddle.net/jh10nf5e/1/

使用javascript我可以给您举一个例子：

function myfunction() {
    var radios = document.getElementsByName('radname');
    if (radios[0].checked) {
        radvalue = radios[0].value
    } else if (radios[1].checked) {
        radvalue = radios[1].value
    }
    document.getElementById('txt').value = radvalue;
}

演示

将此作为参考，将对您有所帮助。

相关文章：