Wie $ (diese) definieren Checkbox Werte TextArea-

Question

INTRO

Ich habe das folgende Skript, das ich auf einem Formular verwenden möchten hinzufügen, die mehrere Fragen enthält, die mit mehreren Kontrollkästchen Eingaben beantwortet werden. Ich möchte Checkbox-Werte hinzufügen, wenn das entsprechende Textfeld in der Klasse "alloptions" aktiviert ist.

JSFIDDLE http://jsfiddle.net/qFfMP/31/ Dies ist, wie es funktioniert, wenn es nur ein Satz von Kontrollkästchen in einem Formular ist. Wenn Sie zwei Kontrollkästchen mit der gleichen Klasse haben, werden die Auswahlmöglichkeiten zu beiden Textfeldern hinzugefügt. Ich möchte Kontrollkästchen in der Alloptions-Klasse aktiviert, um nur in das verschachtelte Textfeld in dieser Klasse gepostet werden.

FRAGE

Wie würde ich ein ausgewähltes Ereignis für "alloptions" als $ (this) definieren, wie diese Klasse definiert Eingänge innerhalb? OR Wäre es besser, "cb" als $ (this) zu definieren und den Code zu überarbeiten; was wenn ich nicht muss ich lieber nicht.

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

Wenn ich das richtig verstanden, die Sie suchen so etwas wie:

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

Wenn Sie jede Checkbox in ein Etikett eingewickelt, der einzige Weg, Ich immagine ist (das ist keine korrekte Art, die Etiketten zu verwenden):

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