Question

INTRO

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

的jsfiddle http://jsfiddle.net/qFfMP/31/ 如果表单上只有一组复选框，这就是它的工作原理。如果您有两组具有相同类别的复选框，则会将选择添加到两个textareas中。我想在alloptions类中检查复选框，只发布到该类中的嵌套textarea。

问题

如何将“alloptions”的select事件定义为$（this），因为此类定义了输入？ OR 我最好将“cb”定义为$（this）并重新编写代码;如果我不必，我宁愿不去。

CODE

<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

如果我理解正确你正在寻找类似的东西：

＆＃13;

$(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(', ')
                                                );
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

$(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(', ')
                                              );
  });
});

＆＃13;

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

＆＃13;

如何定义$（this）以向textarea添加复选框值

1 个答案: