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