Question

大家好我正在研究jquery这里有一个像这样的HTML代码

<div>
    <span class="span1">
      <label class="checkbox" />
          <input type="checkbox" class="regular-checkbox" id="Header" />
          <label for="Header"></label>
      </label>
    </span> 
    <span class="span1">Images</span> 
    <span class="span1">SKU</span>
    <span class="span2">Name</span> 
    <span class="span1">Price</span>                             
</div>

<div id="separate"></div>
      <input type="button" id="button" />

我曾经这样试过它不起作用

<script type="text/javascript">
    $(document).ready(function(){
    $(#button).click(function(){
   $(function () {

      $("input:checkbox").toggle(function () {
         $("#Header").appendTo("#separate");
      },function () {
         $("#separate").appendTo($(this));
      });
      });

   });
</script>

我有这个DIV，其中我有一个checkbox，我有一个图像，价格和名称（手机）。这是我的代码，我有一个'href'图标当我选择checkbox时，我提交了图片，价格和名称应该转移到另一个DIV我该怎样才能取消选择checkbox？它应该切换。你能不能帮我解决这个问题，提前谢谢。

Answer 1

我就是这样做的。 http://jsbin.com/umivoc/1/

JavaScript的：

$(function () {
  // Check if user clicks on the checkbox
  $("#Header").click(function() {

    if($('#Header').is(':checked')){

      // If the checkbox becomes checked, 
      // move the contents to our new div (div2)
      $("#div1").contents().appendTo("#div2");
    } else {

      // Otherwise we can assume it is being unchecked, 
      // so move everything back to it's original div (div1)
      $("#div2").contents().appendTo("#div1");
    }
  });
});

HTML标记：
我清理了你的标记很多，你有打开标签标签，你应该把你想要移动的元素放在他们自己的包装div中，以简化操作。

<span class="span1">
   <label for="Header"></label>
   <input type="checkbox" class="regular-checkbox" id="Header" />
</span> 
<div id="div1">
   <span class="span1">Images</span> 
   <span class="span1">SKU</span>
   <span class="span2">Name</span> 
   <span class="span1">Price</span>                             
</div>
<div id="div2"></div>

Answer 2

目前还不是很清楚你需要什么，但可能会导致解决方案：

<input type="checkbox" class="regular-checkbox" id="Header" />
<br/>
Pos:1
<div id="oryginal">
    <span class="span1">Images</span> 
    <span class="span1">SKU</span>
    <span class="span2">Name</span> 
    <span class="span1">Price</span>
</div>                           
<br/>
Pos:2
<div id="separate"></div>

$("input:checkbox").toggle(
   function () {
         $("#oryginal span").appendTo("#separate");
      },function () {
         $("#separate span").appendTo("#oryginal");
      });

如何使用jquery在提交时将项目从一个div移动到另一个选中的复选框

2 个答案: