Anzeigen gleichen div mehrere Male basierend auf dynamisch generierten Kontrollkästchen

Question

Ich bin derzeit in Angriff einige JQuery und Javascript und ich habe ein kleines Problem, das ich nicht für das Leben von mir herauszufinden, wie man lösen kann.

Ich habe eine form, die dynamisch Informationen aus einer json Datei lädt, die ein "wpTemplate" wiederverwendet und eine Auswahlliste füllt. Diese form kompromittiert etwas von dem Folgenden;

<div class="wp" id="wpTemplate" > 
    <input type="checkbox" id="wpCheck" name="" class="wp" value=""> 
    <label id="wpLabel" class="wpLabel"></label> 

    <div class="uc" id="uc"> 
     <select class="ucSelect" id="ucSelect" name="case" multiple> 
      <option id="option" class="option"></option> 
     </select> 
    </div> 
</div> 

Im Grunde könnte es mehr seine div "wpTemplate". Mein Ziel ist es, die Möglichkeit zu haben, entweder einen oder mehrere "wpCheck" checkbox auszuwählen und für den "uc" div anzuzeigen, abhängig von der spezifischen checkbox ausgewählt wird.

Ich versuchte style="display: none;" zur „uc“ class und eine einfachen if-else Anweisung mit der Show/Hide Funktionalität, aber ohne Erfolg hinzuzufügen.

$('.wp').each(function() { 
    if($(this).is(":checked")) { 
     $('.uc').show(); 
    } else { 
     $('.uc').hide(); 
    } 
}); 

Ich bin neu in JQuery so dass jede Hilfe oder alternative Wege wäre viel zu schätzen sein.

Answer 1

Wie wäre:

$('.wpCheck').on('change', function() { 
    var $uc = $(this).closest('.wpTemplate').find('.uc') 
    if ($(this).prop('checked')) { 
    $uc.show() 
    } else { 
    $uc.hide() 
    } 
}) 

Hier ist ein Arbeits fiddle

Answer 2

Hier ist eine andere Art und Weise:

$(document).ready(function() { 
    $('input.wp').change(function() { 

     var $this = $(this); 
     if ($this.is(":checked")) 
     { 
      $this.siblings('div.uc').show(); 
     } 
     else 
     { 
      $this.siblings('div.uc').hide(); 
     } 
     }); 
    }); 

fiddle