我正在尝试修改一个脚本，我在这里找到的so。 脚本的任务是，当一个复选标记放在一个文本旁边时，该文本被复制到一个文本区域。
我尝试做的修改是有几个文本区域，每个区域都有自己的预定义文本列表。
我要修改的脚本是这样的:
<script>
/* update text area */
function updateTextArea() {
var allVals = [];
$('.taglist :checked').each(function(i) {
allVals.push((i!=0?"\r\n":"")+ $(this).val());
});
$('#text_area_3').val(allVals).attr('rows',allVals.length) ;
}
$(function() {
$('.taglist input').click(updateTextArea);
updateTextArea();
});
</script>
HTML部分如下所示
<body>
<dt><button >copy</button><a> Title for text area #1</a></dt>
<dd><ul><il class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 1">predefined text1 for textarea1</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 1">predefined text2 for textarea1</label><br>
</div>
<textarea id="text_area_1"></textarea></il></ul></dd>
<br>
<dt><button >copy</button><a> Title for text area #2</a></dt>
<dd><ul><il class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 2">predefined text1 for textarea2</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 2">predefined text3 for textarea2</label><br>
</div>
<textarea id="text_area_2"></textarea></il></ul></dd>
<br>
<dt><button >copy</button><a> Title for text area #3</a></dt>
<dd><ul><il class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 3">predefined text1 for textarea3</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 3">predefined text2 for textarea3</label><br>
</div>
<textarea id="text_area_3"></textarea></il></ul></dd>
<br>
它可能是一些很简单的东西或不是，我不是一个程序员。 我只是根据经验学习和做事。 谁能帮忙都非常欢迎！
您可以直接使用单击事件on复选框，并使用$(this)获取最近的类taglist，然后使用eacy循环获取选中的所有复选框。
演示代码:
null
$(function() {
//on click of checkbox
$('input[type=checkbox]').click(function() {
var allVals = [];
//get closest taglist div
var elem = $(this).closest('.taglist')
//use elem to find checkbox under that div
elem.find('input[type=checkbox]:checked').each(function(i) {
allVals.push((i != 0 ? "\r\n" : "") + $(this).val());
});
//add value to nearest textarea
$(this).closest('li').find('textarea').val(allVals);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dt><button >copy</button><a> Title for text area #1</a></dt>
<dd>
<ul>
<li class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 1">predefined text1 for textarea1</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 1">predefined text2 for textarea1</label><br>
</div>
<textarea id="text_area_1"></textarea></li>
</ul>
</dd>
<br>
<dt><button >copy</button><a> Title for text area #2</a></dt>
<dd>
<ul>
<li class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 2">predefined text1 for textarea2</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 2">predefined text3 for textarea2</label><br>
</div>
<textarea id="text_area_2"></textarea></li>
</ul>
</dd>
<br>
<dt><button >copy</button><a> Title for text area #3</a></dt>
<dd>
<ul>
<li class="list-textbox-item">
<div class="taglist">
<label><input type="checkbox" value="predefined text 1 for text area 3">predefined text1 for textarea3</label><br>
<label><input type="checkbox" value="predefined text 2 for text area 3">predefined text2 for textarea3</label><br>
</div>
<textarea id="text_area_3"></textarea></li>
</ul>
</dd>
<br>