<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Checkbox列表双向选择移动代码</title>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<style type="text/css">
*{padding:0;margin:0;}
li{
list-style:none;
cursor:pointer;
}
.selection-container{
height:350px;
margin:10px;
}
.select-box{
width:250px;
height:100%;
border:1px solid #ccc;
float:left;
}
.arrows-box{
width:50px;
height:100%;
float:left;
position:relative;
}
.select-content{
width:100%;
height:320px;
overflow-y:auto;
overflow-x:hidden;
}
.select-box-title{
width:90%;
height:30px;
line-height:30px;
font-size:12px;
font-family:"微软雅黑";
padding:0 5%;
border-bottom:1px solid #ccc;
}
.select-box-title input{
margin:8px 0;
}
.checkbox-all{
float:right;
}
.checkboxs{
vertical-align:middle;
}
.unselect-ul{
padding:10px 0;
}
.select-content li{
padding:5px 15px;
font-size:12px;
font-family:"微软雅黑";
}
.arrow-btns{
width:100%;
height:90px;
position:absolute;
top:50%;
margin-top:-45px;
}
.arrow-btn{
width:20px;
height:12px;
padding:18px 10px;
background:#eee;
border:1px solid #ccc;
margin:0 auto 5px;
cursor:pointer;
}
.arrow-btn i{
display:inline-block;
width:100%;
height:100%;
background:url("images/arrow-left.png") no-repeat center center;
}
.arrow-btn.right i{
background:url("images/arrow-right.png") no-repeat center center;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="selection-container">
<div class="select-box left">
<div class="select-box-title">未选择 - 告警规则<input type="checkbox" class="checkbox-all" /></div>
<div class="select-content">
<ul class="unselect-ul">
<li>
<input type="checkbox" class="checkboxs" />
<span>磁盘使用率普通告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>磁盘使用率严重告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>内存使用率普通告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>内存使用率严重告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>CPU使用率普通告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>CPU使用率严重告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>设备故障告警</span>
</li>
<li>
<input type="checkbox" class="checkboxs" />
<span>维护到期告警</span>
</li>
</ul>
</div>
</div>
<div class="arrows-box">
<div class="arrow-btns">
<div class="arrow-btn right"><i></i></div>
<div class="arrow-btn left"><i></i></div>
</div>
</div>
<div class="select-box right">
<div class="select-box-title">已选择 - 告警规则<input type="checkbox" class="checkbox-all" /></div>
<div class="select-content">
<ul class="selected-ul">
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//全选函数
$('.checkbox-all').click(function(){
if($(this).prop('checked')){
$(this).parent().next().find('.checkboxs').prop('checked',true);
}else{
$(this).parent().next().find('.checkboxs').prop('checked',false);
}
})
//单个checkbox与全选的关系函数
$('.select-content').on('click','.checkboxs',function(e){
var checkedAll = $(this).parents('.select-content').prev().find('.checkbox-all');
var checkboxs = $(this).prop('checked');
if(!checkboxs&&checkedAll.prop('checked')){
checkedAll.prop('checked',false);
}else if(checkboxs&&!checkedAll.prop('checked')){
var lis = $(this).parents('ul').children();
for(var i=0;i<lis.length;i++){
if($(lis[i]).find('.checkboxs').prop('checked')){
if(i==lis.length-1){
checkedAll.prop('checked',true)
}
}else{
break;
}
}
}
stopFunc(e);
});
$('.select-content').on('click','li',function(){
$(this).children('.checkboxs').click();
})
//左右移按钮点击事件
$('.arrow-btn').click(function(){
var checkboxs,origin,target,num=0;
if($(this).hasClass('right')){
origin = $('.unselect-ul');
target = $('.selected-ul');
}else{
origin = $('.selected-ul');
target = $('.unselect-ul');
}
checkboxs = origin.find('.checkboxs');
for(var i=0;i<checkboxs.length;i++){
if($(checkboxs[i]).prop('checked')){
var that = $(checkboxs[i]).parent().clone();
that.children('input').prop('checked',false);
target.append(that);
$(checkboxs[i]).parent().remove();
}else{
num++;
}
}
if(checkboxs.length == num){
alert('未选中任何告警规则！');
}else{
origin.parent().prev().find('.checkbox-all').prop('checked',false);
}
})
})
function stopFunc(e){
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
