<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<style type="text/css">
.drag{
width:100px;
height:20px;
padding:5px;
margin:5px;
border:1px solid #ccc;
background:#AACCFF;
}
.over{
background:#FBEC88;
}
</style>
</head>
<body>
    <table bgcolor="#00FFFF" width="500px" height="400px" cellpadding="1px">
     <tr bgcolor="#999999">
         <td>
   <div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
<div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
<div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
<div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div>
    /div>
           </td>  
            <td>
               <div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
              </div>
            </td>
        </tr>
    </table>
</body>
</html>
怎么把上边复选框选中的div 移到下面id="target"中呢 请帮帮忙 

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery EasyUI</title>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <style type="text/css">
    .drag{
    width:100px;
    height:20px;
    padding:5px;
    margin:5px;
    border:1px solid #ccc;
    background:#AACCFF;
    }
    .over{
    background:#FBEC88;
    }
    </style>
    </head>
    <body>
      <table bgcolor="#00FFFF" width="500px" height="400px" cellpadding="1px">
      <tr bgcolor="#999999">
      <td>
    <div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
    <div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
    <div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
    <div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div>
    /div>
      </td>   
      <td>
      <div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
      </div>
      </td>
      </tr>
      </table>
    </body>
    </html>
    <script>
    document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;
    </script>
      

  2.   


    1.先复制一份到target中
    document.getElementById("target").innerHTML = document.getElementById("source").innerHTML;
    2.再删除
    var source=document.getElementById("source")
    for(var i=0;i<source.childNodes.length;i++){
        source.removeChild(source.childNodes[i]);
    }
      

  3.   

    kyzy_yy_pm(妖言惑众)你这个是把所有的都插入了 要判断没有checked 就不插入 
      

  4.   


    window.onload = function () {
          var temp = $("#source").html();
          $("#source").remove();
          $("#target").html(temp);
    };
      

  5.   


    window.onload = function () {
          var temp = $("#source :checked").html();
          $("#source :checked").each(function () { 
               $(this).remove()
          });
          $("#target").html(temp);
    };
      

  6.   

    这个呀好像不行 你这个只是把input 插入进去了哦 要整个div哦 
      

  7.   

    把没有选中的移除,然后用outerHTML
      

  8.   

    window.onload = function () {
          var temp = $("#source").html();
          $("#source :checked").remove();
          $("#target").html(temp).find("input:not(:checked)").remove();
    };
      

  9.   

    string[] num = repstr.Split('-');
      

  10.   

    this.parentNode.parentNode.removeChild(this.parentNode);
      

  11.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery EasyUI</title>
    <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
    <style type="text/css">
    .drag{
    width:100px;
    height:20px;
    padding:5px;
    margin:5px;
    border:1px solid #ccc;
    background:#AACCFF;
    }
    .over{
    background:#FBEC88;
    }
    </style>
    </head>
    <body><div id="source" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;">
    <div id="d1" class="over"><input type="checkbox" name="c1"id="c1">添加权限</div>
    <div id="d2" class="over"><input type="checkbox" name="c2"id="c2">删除权限</div>
    <div id="d3" class="over"><input type="checkbox" name="c3"id="c3">修改权限</div><div id="target" style="border:1px solid #ccc;width:200px;height:400px;float:left;margin:5px;"></div>
    <script type="text/javascript">
    $("input[type=checkbox]").click(function() {
    var me = $(this);

    if(me.parent().parent().attr("id") === 'target') {
    alert('已经在里面了...');
    return;
    }
    me.parent().prependTo("#target");
    });
    //判断它是否选中直接使用this.checked = true 验证
    </script>
    </body>
    </html>
      

  12.   


    //jquery
      $("#source").clone().append("#target");
          $("#source").empty();
      

  13.   


     $("#source").clone().prependTo("#target");
           alert(document.getElementById("target").innerHTML);
          $("#source").empty();
      

  14.   

    $('#target').append($('input:checked').parent())