Question

如果选中了div.product中的复选框，我想在div.cart中显示整个div.product。但是由于页面上有多个div.product我无法实现这一目标。我只想添加选中了复选框的div.product。

编辑：如果未选中复选框，则也应从div.cart中删除div.product。

到目前为止，我已经厌倦了很多方法，包括clone（）：

$("input").click(function(){
            $(".product").clone().appendTo(".cart");
        });

但无济于事，因为它会在div.cart中克隆所有div.product，如本小提琴中所示

http://jsfiddle.net/gcomm/xpvt214o/883461/

我的HTML如下，请指导我我犯了什么错误。我对学习Jquery非常陌生。

<div class="product-list">
<div class="product earrings"> 
<div class=" product-info"> Product 1 </div>
<input type="checkbox" name=" E45" value="1000">
</div>

<div class="product bracelets"> 
<div class=" product-info"> Product 2 </div>
<input type="checkbox" name="E46" value="1000">
</div>

<div class="product rings"> 
<div class=" product-info"> Product 3 </div>
<input type="checkbox" name="E47" value="1000">
</div>
</div>

<div class="cart">
</div>

Answer 1

您应该真正侦听change，而不是click。另外，您不会检查该复选框是否被实际选中，但是可以使用this.checked轻松地完成此操作。

您还可以使用parent('.product')检索应附加的单个.product元素。

以下是您要实现的目标的演示：

$('input[type="checkbox"]').on('change', function() {  
  if( this.checked )
  {
    var $clone = $(this).parent('.product').clone();
    $(this).data('cloned', $clone);
    $clone.appendTo(".cart");
  }
  else if( $(this).data('cloned') )
  {
    $(this).data('cloned').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-list">
  <div class="product earrings"> 
  <div class=" product-info"> Product 1 </div>
  <input type="checkbox" name=" E45" value="1000" />
</div>

<div class="product bracelets"> 
  <div class=" product-info"> Product 2 </div>
  <input type="checkbox" name="E46" value="1000" />
</div>

<div class="product rings"> 
  <div class=" product-info"> Product 3 </div>
  <input type="checkbox" name="E47" value="1000" />
</div>

<div class="cart"></div>

仅在选中复选框的情况下，克隆单击的div

1 个答案: