Question

我有一个图库，顶部有一个复选框＆＃34;检查全部＆＃34;，里面有几个图像，每个图像都有一个复选框。这里的预期结果是在选中复选框时将一个，几个或所有图像移动到另一个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-->

Answer 1

“statusCheckBox”它是一个id而不是一个类。
后，您需要使用$（this）。

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

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

选中复选框后，将div移动到另一个div

1 个答案: