Question

我的表单中有几个文本框。我想在每个文本框旁边放置一个复选框。如果我选中该框，我希望将相应文本框的内容复制到一个大文本区域（大文本区域）。例如，如果我在文本框＃1中键入“apples”并单击文本框＃1旁边的复选框，我希望将“apples”复制到Big Text Area;那么如果我在文本框＃2中键入“oranges”，我希望将“oranges”复制到Big Text Area并附加苹果，这样Big Text Area就会包含“apple oranges”。

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

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

这是以下的jsfiddle：http://jsfiddle.net/33RLk/

<script>
function Copy(f) {
if(f.copyfrom1.checked == true) {
f.copyto.value += '\n' + f.copyfrom.value;

}
}
</script>

<form>
Copy From #1:
<input type="text" name="copyfrom">
<br>
<input type="checkbox" name="copyfrom1" onclick="Copy(this.form)">
<em>Check to copy "Copy From #1" box to "Copy to" box.</em>
<P>
<br>

Copy From #2:
<input type="text" name="copyfromtwo">
<br>
<input type="checkbox" name="copyfrom2" onclick="Copy(this.form)">
<em>Check to copy "Copy From #2" box to "Copy to" box.</em>
<P>
<br>
Copy to:
<textarea name="copyto" cols="25" rows="4">Text</textarea>

</form>

Answer 1

使用jQuery：

注意各种表单元素的命名/ id。

<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>

然后，使用jQuery选择器，我们可以使用单个函数来查看任意数量的复选框/文本字段对：

// 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());
    }    
})

如果你希望它删除以前附加的文本，如果用户取消选中一个框，你还需要做更多工作，但这应该可以让你开始。

这是fiddle。

Answer 2

更改您的onclick，以便通过this，而不是this.form：

onclick="Copy(this)"

现在您可以引用input[type="checkbox"]元素。您可以使用其previousSibling和nextSibling属性（可能在循环中）查找其前面的input[type="text"]和孩子的textarea 其中一个“下一个”兄弟姐妹。

使用您引用的标记，假设Copy接受对input[type="checkbox"]的引用（例如，您正在传递this），则：

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
}

但是，如果你将每组这些容器放在某种容器中（例如，div），这会变得容易多了，因为那时你可以使用parentNode（可能反复）直到你转到div，然后转到getElementsByTagName或（在modern browsers）querySelector上，以更健壮的方式查找div中的相关元素。（querySelector找到你调用它的元素中的第一个元素与你传入它的CSS选择器匹配。）

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

2 个答案: