2016-03-20 6 views
0

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

schwer ohne eine richtige Erklärung zu helfen, in Worten, von dem, was Sie versuchen, – charlietfl

+0

zu tun @chalietfl Sie mir gestern mit einer ähnlichen Frage geholfen. Anderes Skript, anderes Problem. Mit diesem Skript versuche ich "alloptions" als Trigger anstelle der Eingabe zu verwenden. Ich denke, ich sollte dieses Skript überarbeiten, um die Eingabe als Auslöser für $ (this) zu verwenden. –

+0

Das erklärt immer noch nicht, was Sie versuchen zu tun – charlietfl

Antwort

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>

+1

was ist, wenn Benutzer anderen Inhalt in Textarea eingibt? Dieses UI-Konzept selbst macht keinen Sinn – charlietfl

+0

@gaemaf - Genau! Ich war mir nicht sicher, wie ich das Ereignis auslösen sollte. Vielen Dank für Ihre Zeit, da ich sicher bin, dass ich ohne Ihre Hilfe viel mehr Stunden damit verbracht hätte. –

+0

@charlietfl - danke auch für deine Zeit. Um Ihre Frage zu beantworten, wäre der Textbereich versteckt. –