如何定义 $(this) 以将复选框值添加到 textarea

Question

简介

我想在包含多个问题的表单上使用以下脚本，这些问题通过多个复选框输入来回答。 我想在选中“alloptions”类中的相应文本区域时添加复选框值。

JSFIDDLE http://jsfiddle.net/qFfMP/31/ 如果表单上只有一组复选框，这就是它的工作方式。如果您有两组具有相同类的复选框，则选择会添加到两个文本区域。我想在 alloptions 类中保持选中复选框，以便仅将其发布到该类中的嵌套文本区域。

问题

当此类在其中定义输入时，如何将“alloptions”的选择事件定义为 $(this)？ 或 我最好将“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>