Checkbox-jQuery双向选择器
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<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>
4、书写css代码。
<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>
5、书写并添加js代码。
<script src="js/jquery-1.11.1.min.js" ></script>
<script>
$(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>
6、代码整体结构。
7、查看效果。
