当复选框被选中时，将div移动到另一个div

我有一个在顶部具有复选框以“检查所有”的图库，里面有几个图像，每个图像都有一个复选框。这里的预期结果是在检查复选框时将一个，多个或全部图像移动到另一个div。选择所有图像的复选框工作得很好，但在单张检查图像时遇到问题。我在这里错过了什么？当复选框被选中时，将div移动到另一个div

谢谢！

的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单张图像选择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图像的接收容器

<div id="bannerScroll" class="col-md-3 banner-scroll"> 
<!--////////////EMPTY EMPTY EMPTY EMPT/////////////////--> 
</div><!--//END COL-MD-3-->

来源

2017-06-21 Timmy

您要添加一个单击处理程序，以大量的元素。但是，要引用处理程序中单击的元素，您需要'$（this）'。此外，你不能有多个相同的'ID's。无论如何，你正在选择'statusCheckBox'类，但是在你的HTML中它是一个'id'。 –

啊，好吧！我会尝试你的解决方案:) – Timmy

感谢@Chris G的帮助！您的解决方案也有帮助 – Timmy

“statusCheckBox”它是一个id不是类。
点击后，您需要引用点击的复选框，使用$（this）。

可能使用更改事件而不是点击会更好。

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

来源

2017-06-21 10:44:53

谢谢！我会尝试你的解决方案。 – Timmy

它的工作原理！谢谢！ – Timmy

当复选框被选中时，将div移动到另一个div

回答

相关问题