如:
  父页面有一个输入框,后面有一个按钮,点击按钮弹出一个子页面,子页面分为3个区域,左侧 中侧  右侧,左侧的根据复选框选择,选择中后,点击移动可以移动到右侧显示,右侧的根据复选框选择点击移除,可以清点,点击确定按钮把右侧选择的数据填充到父页面的输入框中。
-----求大神们指点。复选框JAVA左右侧移动复选框选中

解决方案 »

  1.   

    你用window.parent.document.getElementById("父页面输入框的id").value,如果有jquery的话你可以用winow.parent.$("#id").val()这样就能获取父页面的元素的值了
      

  2.   

    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #a4{background-color:#666666;width:800px;clear:both;}
    #a7{float:left;width:35%;height:400px; background-color:#FF9999}
    #a8{float:left;width:30%;height:400px; background-color:#00CCFF}
    #a9{float:left;width:35%;height:400px;background-color:#FFFFCC}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script>
    function toLeft(){
     $("#a9 P").siblings().andSelf().has('input').remove();
      $("#a7 [name='checkbox'][checked]").each(function(){ 
        $("#a9").append("<p><input type='checkbox' name='checkbox' value='"+$(this).val()+"'>"+$(this).val()+"</p>");    
        })
    }function clearSelect(){
      $("#a9 [name='checkbox'][checked]").each(function(){   
       $(this).parent().remove();
      })  
    }
    </script>
    </head>
    <body>
    <div id="a7">
    <p>左侧</p> <input type="checkbox" name="checkbox" value="checkbox1">
       checkbox1
       <input type="checkbox" name="checkbox" value="checkbox2">
       checkbox2
       <input type="checkbox" name="checkbox" value="checkbox3">
       checkbox3
       <input type="checkbox" name="checkbox" value="checkbox4">
       checkbox4
       <input type="checkbox" name="checkbox" value="checkbox5">
       checkbox5
       <input type="checkbox" name="checkbox" value="checkbox6">
       checkbox6
       <input type="checkbox" name="checkbox" value="checkbox7">
       checkbox7
       <input type="checkbox" name="checkbox" value="checkbox8">
        checkbox8
    </div>
    <div id="a8">  
      <p>中侧</p>
      <input  onclick="toLeft()"  type='button' value="移左"/>
      <input  onclick="clearSelect()" type='button' value="清除" >
      </div>
    <div id="a9">
      <p>右侧</p>
    </div>
    </div>
    </body>
    </html>
      

  3.   

    今天自己看了一下jquery文件,自己做了一个,不得不承认jquery很强大,很实用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>个人管理系统登录</title>
    <script src="js/jquery-1.5.2.min.js"></script>
    <script>
    var _l_ids = "";
    var _r_ids = "";
    // 全选
    function _all(_id,obj){
    $("#"+_id).find(":checkbox").each(function(){
    $(this).attr("checked",obj.checked);
    });
    } //右侧取值
    function y_move(){
    // 获取左侧选中值
    $("#lList").find(":checked[name='v_id']").each(function(i){
    // 将左侧选中的值复制到_id_
    var _id_ = $(this).val();
    // 去重操作
    if(_l_ids.indexOf(_id_) < 0){
    // 将父级的值累加到子集
    _l_ids += _id_;
    // 取到左边选中的值,以逗号隔开显示
    if($("#lList").find(":checked[name='v_id']").length != i+1){
    _l_ids += ",";
    }
    // 复制到左边值
    var _tr = $(this).parent().parent().clone();
    // 将左边的值复制到右边时,取消选择按钮
    $(_tr).find(":checkbox").attr("checked",false);
    // 右边接受左边的值
    $("#rList").find("table").append(_tr);
    }
    });
    } //移除值
    function l_move(){
    // 获取右边选中的值
    $("#rList").find(":checked[name='v_id']").each(function(){
    // 将右边选中的值移除
    $(this).parent().parent().remove();
    });
    }
    // 确认按钮
    function _test(){
    // 获取右边选中的值
    $("#rList").find(":checked[name='v_id']").each(function(j){
    // 将右边获取的值复制到_id_
    var _id_ = $(this).val();
    // 去重操作
    if(_r_ids.indexOf(_id_) < 0){
    // 将父级的值累加到子集
    _r_ids += _id_;
    if($("#rList").find(":checked[name='v_id']").length != j+1){
    _r_ids += ",";
    }
    }
    });
    //打印取出的值
    alert(_r_ids);
    }
    </script>
    </head><body>
    <div style="float:left;" id="lList">
    <table border="1" width="400">
    <tr>
    <td>
    <input type="checkbox" value="" onclick="_all('lList',this)"/>
    </td>
    <td>
    姓名
    </td>
    <td>
    分数
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="v_id" value="000111111"/>
    </td>
    <td>
    丽丽
    </td>
    <td>
    100
    </td>
    </tr>
    <tr>
    <td>
    <input type="checkbox" name="v_id" value="000222222"/>
    </td>
    <td>
    小胡
    </td>
    <td>
    80
    </td>
    </tr>
    </table>
    </div>
    <div style="float:left;margin-left:50px;">
    <button onclick="y_move()">>></button>
    <button onclick="l_move()"><<</button>
    <button onclick="_test()">test</button>
    </div> <div style="float:left;margin-left:50px;" id="rList" >
    <table border="1" width="400">
    <tr>
    <td>
    <input type="checkbox" value="" onclick="_all('rList',this)"/>
    </td>
    <td>
    姓名
    </td>
    <td>
    分数
    </td>
    </tr>

    </table>
    </div>
    </body>
    </html>