Wenn das Kontrollkästchen ausgewählt ist, verschieben Sie das div zu einem anderen div

Question

Ich habe eine Galerie, die eine Checkbox oben auf "alle überprüfen" hat, mehrere Bilder innerhalb und jeder von ihnen hat ein Kontrollkästchen. Das erwartete Ergebnis besteht darin, ein, mehrere oder alle Bilder in ein anderes div zu verschieben, wenn das Kontrollkästchen aktiviert wird. Die Checkbox, die alle Bilder auswählt, funktioniert so, aber ich habe Probleme mit der einfachen Überprüfung eines Bildes. Was fehlt mir hier?

Danke!

JavaScript

$(function() { 
    // Check if user clicks on the checkbox 
    $(".bannerCheck, .statusCheckBox").click(function() { 

    if($('.bannerCheck, .statusCheckBox').is(':checked')){ 
     console.log('banner checked');  
     $(".bulkBanner").contents().appendTo("#bannerScroll"); 
    } 
    else { 
     $("#bannerScroll").contents().appendTo(".bulkBanner"); 
    } 
    }); 
}); 

HTML Einzelbilder wählen Sie HTML

<div class="bulkBanner col-md-3 objectimage" id="' + hash + '"style="margin-top:20px;"> 
<!--BANNER--> 
<div class="row"> 
    <!--BANNER CHECKBOX--> 
    <div class="col-md-1"> 
     <input id="statusCheckBox" type="checkbox"> 
    </div><!--//END COL-MD-1--> 
    <!--BANNER NAME--> 
    <div class="col-md-7 roboto-condensed"> 
     <div class="bannernameeditable"> 
      ' + banner_name + ' 
     </div> 
    </div><!--//END COL-MD-7 ROBOTO-CONDENSED--> 
</div><!--//END ROW--> 
<!--BANNER IMAGE--> 
<div class="row"> 
    <div class="col-md-12"> 
     <img class="imageCloudinary ' + disabled + '"src="url_cloudinary'" style="width: 100%;"> 
    </div><!--//END COL-MD-12--> 
</div><!--//END ROW--> 

HTML Der Aufnahmebehälter der Bilder

Answer 1

1. "statusCheckBox" es ist eine ID keine Klasse.
2. Nach dem Klick müssen Sie das angeklickte Kontrollkästchen mit $ (this) verweisen.

3. wahrscheinlich verwenden Änderungsereignis anstelle von Klick wird besser funktionieren.

   $("#statusCheckBox").change(function(){ 
       if($(this).is(':checked')) 
       { 
        // add the rest... 
       } 
   });