2009-11-23 113 views
0

如何显示表单文本框中单选按钮的值?当单击单选按钮时,我希望它改变。使用HTML/Javascript显示表单文本框中单选按钮的值

这里是我的单选按钮:

<input type="radio" name="testPassed" id="TestPassed" value="TestPassed"> 
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed"> 

文本框:

<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea> 

非常感谢

+0

问题的格式看起来很混乱。 – ndim 2009-11-23 14:33:07

+0

设置name属性相同,这样控件可以是单选按钮:name =“testResults”。 – artdanil 2009-11-23 15:02:06

+0

我认为@artdanil试图说的是,您应该使用'name'属性来适当地分组您的单选按钮。阅读以下教程以获取更多信息:http://www.echoecho.com/htmlforms10.htm – 2009-11-23 15:41:08

回答

2

好了,你可以实现像这样的单选按钮的OnClick功能:<input type="radio" name="sports" value="Football" onClick="doSomething();">或者你可以有一个函数遍历你的表单上的所有单选按钮以及选中的任何一个按钮,将会填充你的文本框r值:

<form name="myform"> 

<input type="text" id="txt" /> 

... 

<script type="text/javascript"> 

for (i=0; i<document.myform.sports.length; i++) 

    if (document.myform.sports[i].checked==true) 
    { 
      t =t +document.myform.sports[i].value 
    } 
} 

document.getElementById("txt").value=t 
+0

如果您使用OnClick技术,请注意,如果单击按钮以外的方式选择单选按钮,则不会触发此选项。例如如果用户使用键盘或以编程方式设置。 – Rory 2010-11-21 19:08:47

+0

@Rory:这取决于浏览器。 – 2010-11-21 23:17:43

0

使用jQuery,这是非常简单的

HTML

<div id="radiobuttons"> 
<--! put here radios buttons --> 
</div> 

$("#radiobuttons input:radio").click(function() { 
    $("textbox_id").val($(this).val()); 
}); 
1

你可以写,将结果值传递给文本区域的功能:

<head> 
<script type="text/javascript"> 
<!-- 
function writeResult(text){ 
    document.myform.testResultDescription.value = text; 
} 
//--> 
</script> 
</head> 

<body> 
<form name="myform"> 
    <input type="radio" name="testResults" id="TestPassed" value="TestPassed" onclick="writeResult('Test Passed');" /> 
    Test Passed<br /> 
    <input type="radio" name="testResults" id="TestFailed" value="TestFailed" onclick="writeResult('Test Failed');" /> 
    Test Failed<br /> 
    <textarea name="testResultDescription" cols="50" rows="5" id="testResultDescription"></textarea> 
</form> 
</body>