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。

选中复选框后，将div移动到不同的部分

1 个答案: