javascript - 选中复选框时将 div 移动到不同的部分

Question

我有一个页面在左侧显示产品图片。我也在右侧，客户地址旁边有多个复选框。示例:

<div section visible>
  <div>image/product 1</div>  <div>cb-1-address - cb-2-address - cb-3-address</div>
  <div>image/product 2</div>  <div>cb-1-address - cb-2-address - cb-3-address</div>
  <div>image/product 3</div>  <div>cb-1-address - cb-2-address - cb-3-address</div>
</div section visible>

<div section hidden></div section hidden>

当产品行的复选框被选中时，div 包含:

例子:

<div>image/product 1</div>  <div>cb-1-address CHECKED - cb-2-address - cb-3-address</div>

然后隐藏的部分变为可见，选中复选框的行被移动到该部分。

是否有任何示例/脚本可以指导我如何使用 JQuery 执行此操作？

非常感谢您的帮助。

Answer 1

这是一个开始 Fiddle

$(':checkBox').click(function () {

  var item = $(this).closest('div');

   $('#hiddenArea').append(item.prev()).append(item);    

});

我已经调整了标记:

<div>
 <h1>Visible Products</h1>

<div>image/product 1</div>
<div>cb-1-address - cb-2-address - cb-3-address
    <input type="checkbox" name="vehicle" value="Address 1" />
</div>
<div>image/product 2</div>
<div>cb-1-address - cb-2-address - cb-3-address
    <input type="checkbox" name="vehicle" value="Address 2" />
</div>
<div>image/product 3</div>
<div>cb-1-address - cb-2-address - cb-3-address
    <input type="checkbox" name="vehicle" value="Address 1" />
</div>
</div>
<div id="hiddenArea">
 <h1>Hidden Section</h1>
</div>

如果您使用特定标记更新您的问题，我很乐意更新 JsFiddle。