當複選框被選中時，將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

回答

相關問題