如何定义 $(this) 以将复选框值添加到文本区域

Question

简介

我有以下脚本，我想在包含多个问题的表单上使用，这些问题通过多个复选框输入来回答。我想在选中 "alloptions" class.

中的相应文本区域时添加复选框值

JSFIDDLE http://jsfiddle.net/qFfMP/31/ 如果表单上只有一组复选框，这就是它的工作原理。如果您有两组具有相同 class 的复选框，那么 select 离子将添加到两个文本区域。我想在分配选项 class 中选中复选框，以便只发布到 class.

中的嵌套文本区域

问题

如何将 "alloptions" 的 select 事件定义为 $(this)，因为此 class 在其中定义了输入？或我最好将 "cb" 定义为 $(this) 并重新编写代码吗？如果我不需要，我宁愿不。

代码

<div class="alloptions">
<textarea class="fulloptions" type="text" value=""></textarea><br>
<input type="checkbox" class="cb" value="Test1" />Test1<br>
<input type="checkbox" class="cb" value="Test2" />Test2<br>
<input type="checkbox" class="cb" value="Test3" />Test3
</div>
<hr>
<div class="alloptions">
<textarea class="fulloptions" type="text" value=""></textarea><br>
<input type="checkbox" class="cb" value="Test1" />Test1<br>
<input type="checkbox" class="cb" value="Test2" />Test2<br>
<input type="checkbox" class="cb" value="Test3" />Test3
</div>



<script>
$(document).ready(function () {

var checkboxes = $(".alloptions  input[type='checkbox']");
checkboxes.on('change', function() {
    $('.alloptions').find('.fulloptions').val(
        checkboxes.filter(':checked').map(function(item) {
            return this.value;
        }).get().join(', ')
     );
});

});
</script>

Answer 1

如果我没理解错的话，您正在寻找类似的东西：

$(function () {
  $(".alloptions  input[type='checkbox']").on('change', function() {
    $(this).siblings('textarea.fulloptions').val($(this).siblings('input[type="checkbox"]').add(this).filter(':checked').map(function(item) {
      return this.value;
    }).get().join(', ')
                                                );
  });
});

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>


<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <input type="checkbox" class="cb" name="option1" value="Test1" />Test1<br>
    <input type="checkbox" class="cb" name="option1" value="Test2" />Test2<br>
    <input type="checkbox" class="cb" name="option1" value="Test3" />Test3
</div>
<br>
<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <input type="checkbox" class="cb" value="Test1" />Test1<br>
    <input type="checkbox" class="cb" value="Test2" />Test2<br>
    <input type="checkbox" class="cb" value="Test3" />Test3
</div>

如果将每个复选框都包裹在标签中，我想象的唯一方法是（这不是使用标签的正确方法）：

$(function () {
  $(".alloptions  input[type='checkbox']").on('change', function () {
    var parentDiv = $(this).closest('div.alloptions');
    parentDiv.find('textarea.fulloptions').val(parentDiv.find('input[type="checkbox"]').filter(':checked').map(function (item) {
      return this.value;
    }).get().join(', ')
                                              );
  });
});

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <label>Test1
        <input type="checkbox" class="cb" name="option1" value="Test1"/>Test1<br>
    </label>
    <label>Test2
        <input type="checkbox" class="cb" name="option1" value="Test2"/>Test2<br>
    </label>
    <label>Test3
        <input type="checkbox" class="cb" name="option1" value="Test3"/>Test3
    </label>
</div>
<br>

<div class="alloptions">
    <textarea class="fulloptions" type="text" value=""></textarea><br>
    <label>Test1
        <input type="checkbox" class="cb" name="option1" value="Test1"/>Test1<br>
    </label>
    <label>Test2
        <input type="checkbox" class="cb" name="option1" value="Test2"/>Test2<br>
    </label>
    <label>Test3
        <input type="checkbox" class="cb" name="option1" value="Test3"/>Test3
    </label>
</div>

如何定义 $(this) 以将复选框值添加到文本区域

How to define $(this) to add checkbox values to textarea

checkbox

jquery

textarea

this