Javascript 如何使用js或jquery将复选框数据放入html中的文本区域框？_Javascript_Jquery_Html_Frontend

Javascript 如何使用js或jquery将复选框数据放入html中的文本区域框？

javascript jquery html

Javascript 如何使用js或jquery将复选框数据放入html中的文本区域框？,javascript,jquery,html,frontend,Javascript,Jquery,Html,Frontend,我有一个带有复选框和文本区域的html表单。当我选中该复选框时，我希望它能够动态地使用其值更新文本区域。我做错了什么？代码如下： <html> <head> <meta charset="ISO-8859-1"> <title>Sample Web page</title> <script type="javascript"> function changeTA() { var inputElements = d

我有一个带有复选框和文本区域的html表单。当我选中该复选框时，我希望它能够动态地使用其值更新文本区域。我做错了什么？代码如下：

<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script type="javascript">
   function changeTA() {
   var inputElements = document.getElementByName("favorite_pet");
       for(var i=0; inputElements[i]; ++i){
           if(inputElements[i].checked){
               $('#ta').val($('#ta').val()+inputElements[i].value); 
     }
   }
</script>
</head>
<body>
<form>  
   <legend>What is Your Favorite Pet?</legend>  
   <input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>  
   <input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>  
   <input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>  
       <br>  

   <textarea id="ta" rows="4" cols="50">
   </textarea>
</form>

</body>
</html>


示例网页
函数changeTA（）{
var inputElements=document.getElementByName（“favorite_pet”）；
对于（变量i=0；输入元素[i]；++i）{
if（inputElements[i]。选中）{
$（'#ta'）.val（$（'#ta'）.val（）+inputElements[i].value）；
}
}
你最喜欢的宠物是什么？
猫

狗

鸟类

您的代码中有3个问题：

您在
```
getElementByName
```
中有输入错误，请使用
```
getElementsByName
```
函数中缺少一个结束括号
将
更改为

您的代码应该可以解决以下3个问题：

<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script type="text/javascript">
   function changeTA() {
        var inputElements = document.getElementsByName("favorite_pet");
        for(var i=0; inputElements[i]; ++i){
           if(inputElements[i].checked){
               $('#ta').val($('#ta').val()+inputElements[i].value); 
              }
       }
   }
</script>
</head>
<body>
<form>  
   <legend>What is Your Favorite Pet?</legend>  
   <input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>  
   <input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>  
   <input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>  
   <br>  

   <textarea id="ta" rows="4" cols="50">
   </textarea>
</form>

</body>
</html>


示例网页
函数changeTA（）{
var inputElements=document.getElementsByName（“favorite_pet”）；
对于（变量i=0；输入元素[i]；++i）{
if（inputElements[i]。选中）{
$（'#ta'）.val（$（'#ta'）.val（）+inputElements[i].value）；
}
}
}
你最喜欢的宠物是什么？
猫

狗

鸟类

这是一个可用的提琴：

仍然没有得到我预期的结果。文本区域框是空白的。你是对的，你的脚本中也缺少了一个结束括号，我更新了我的答案：）谢谢。它用提琴工作，但不是chrome/IE。知道吗？为什么？不。我的意思是网页应该直接在浏览器上运行，而不需要任何工具它类似于fiddle。它在fiddle中工作，但不直接在浏览器中工作。您知道什么原因吗？JSFIDLE不是运行javascript代码的工具，它只是一个“在线IDE”，非常适合共享代码片段，您在那里编写的所有代码都在浏览器上运行。