jQuery Checkbox列表双向选择移动代码

jQuery Checkbox列表双向选择移动代码，通过点击左右箭头按钮可以分别将两边div块中复选框已选中的列表项目在两边来回移动。

js代码

<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>

在线预览
资源均来自第三方，谨慎下载，前往第三方网站下载