javascript关于控件的控制

有两个层div1和div2我想在层2中放几个checkbox，当checkbox被选中时，把此checkbox移动到层1中，此是层1中的checkbox是选中的，然后当层1中的checkbox被取消选中时，再把它移回到层2中

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        //有两个层div1和div2
        //我想在层2中放几个checkbox，当checkbox被选中时，把此checkbox移动到层1中，
        //此是层1中的checkbox是选中的，然后当层1中的checkbox被取消选中时，再把它移回到层2中 
        $(function () {
            $("#div1 :checkbox").live("click",function(){
                if(!$(this).is(":checked")){
                    $("#div2").append($(this).parent());
                }
            });
            $("#div2 :checkbox").live("click",function(){
                if($(this).is(":checked")){
                    $("#div1").append($(this).parent());
                }
            });
        });
    </script>
    </head>
    <body>
        <div id="div1">
            均为选中的checkbox:
            <br />
            <span><input type="checkbox" checked="checked" value="a" />a</span>
            <span><input type="checkbox" checked="checked" value="b" />b</span>
        </div>
        <div id="div2">
            均为未选中的checkbox:
            <br />
            <span><input type="checkbox" value="c" />c</span>
            <span><input type="checkbox" value="d" />d</span>
        </div>
    </body>
    </html>