Javascript：多个复选框调用一个函数

我的表单中有几个文本框。我想在每个文本框旁边放置一个复选框。如果我选中该框，我希望将相应文本框的内容复制到一个大文本区域（大文本区域）。例如，如果我在文本框#1中键入“苹果”，然后单击文本框#1旁边的复选框，我希望将“苹果”复制到大文本区域；然后，如果我在文本框2中键入“oranges”，我希望将“oranges”复制到大文本区域并添加苹果，这样大文本区域将包含“Apple oranges”

如果我在函数中手动键入字段名，我可以完成上述操作，但这很麻烦。我希望有一个简单的脚本，根据哪个输入/复选框调用它而改变

在下面的脚本中，名为“copyto”的文本区域是我希望复制到的大文本区域。选中copy From#1下的框后，函数当前会将此框中的文本复制到“copyto”文本区域。但是，选中“从#2复制”下的框后，我需要更改该功能，以允许将“从#2复制”框中的内容复制到“复制到”文本区域

以下是jsfiddle：

功能副本（f）{
if（f.copyfrom1.checked==true）{
f、 copyto.value+='\n'+f.copyfrom.value；
}
}
复制自#1：


选中将“从#1复制”框复制到“复制到”框。



复制自#2：


选中将“从#2复制”框复制到“复制到”框。



抄送：
正文

再次单击更改您的

，这样您只需传递
此
，而不是
此。表单
：

onclick="Copy(this)"

现在您有了对
input[type=“checkbox”]
元素的引用。您可以使用它的和属性（可能在循环中）查找它前面的
输入[type=“text”]
，以及它的一个“next”同级的子项
textarea

对于您引用的标记，假设
Copy
接受对
输入[type=“checkbox”]
的引用（例如，您正在传递
此
），则：

功能复制（复选框）{
var文本输入；
可变区；
textInput=checkbox.previousSibling.previousSibling；//必须跳过

textArea=checkbox.nextSibling.nextSibling.getElementsByTagName（'textArea'）[0]；
//现在将值从textInput复制到textArea
}

不过，如果您将每组数据放在某种容器中（例如，
div
），这会变得容易得多，因为这样您就可以使用
parentNode
（可能重复）直到到达
div
，然后或者（开）以更稳健的方式查找
div
中的相关元素。（
querySelector
在调用它的元素中查找与传入的CSS选择器匹配的第一个元素）。
使用jQuery：

注意各种表单元素的命名/标识

<form>
Copy From #1:
<input type="text" id="copyfrom_1">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_1">
<em>Check to copy "Copy From #1" box to "Copy to" box.</em>
<P>
<br>

Copy From #2:
<input type="text" id="copyfrom_2">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_2">
<em>Check to copy "Copy From #2" box to "Copy to" box.</em>
<P>
<br>
Copy to:
<textarea id="copyto" cols="25" rows="4">Text</textarea>

</form>

如果您希望在用户取消选中某个框时删除先前附加的文本，您将有更多的工作要做，但这应该可以让您开始

这里有一个.
可以使用附加到输入类型复选框选择器的事件处理程序，而不是在每个框上调用onClick。这很容易。可能重复：。谢谢。听起来不错，但我对如何实现有点迷茫。太好了，谢谢。你介意展示一下我的jsfiddle是如何工作的吗？@T.J.Crowder——他的原始代码使用的是纯DOM的东西。jQuery是我的建议，因为使用部分选择器更容易获得一系列元素名称的句柄。@T.J.Crowder-我最初在评论中提到了jQuery。OP要求提供如何实施的信息。@EmmyS:啊，完美的方法。（这是我的+1，顺便说一句）如果我的“copyfrom”字段在iframe中怎么办？我应该如何调整代码以允许父页面上的复选框触发从iframe中的“copyfrom”字段到父页面中的“copyto”字段的复制？我尝试了其他帖子的一些建议，但没能让它们发挥作用。再次感谢！
function Copy(checkbox) {
    var textInput;
    var textArea;

    textInput = checkbox.previousSibling.previousSibling; // Have to skip the <br>
    textArea = checkbox.nextSibling.nextSibling.getElementsByTagName('textarea')[0];

    // Now copy the value from textInput to textArea
}

<form>
Copy From #1:
<input type="text" id="copyfrom_1">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_1">
<em>Check to copy "Copy From #1" box to "Copy to" box.</em>
<P>
<br>

Copy From #2:
<input type="text" id="copyfrom_2">
<br>
<input type="checkbox" name="copyFrom" id="check_copyfrom_2">
<em>Check to copy "Copy From #2" box to "Copy to" box.</em>
<P>
<br>
Copy to:
<textarea id="copyto" cols="25" rows="4">Text</textarea>

</form>

// this selector finds any items whose id starts with `check_`
$('[id^=check_]').click(function() {
    // this next line will get the number of the text field/checkbox pair to 
    // look at (copyfrom_1/check_copyfrom_1, etc.)
    var idx = $(this).attr('id').split('_').pop();
    var copyTo = $('#copyto');

    // now check to see if the current state of the box is checked or unchecked
    if($('#check_copyfrom_'+idx).is(':checked')){
        // if it's checked, append the value to the textarea
        copyTo.val(copyTo.val() + $('#copyfrom_'+idx).val());
    }    
})