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

jQuery Checkbox列表双向选择移动代码-精品资源网
jQuery Checkbox列表双向选择移动代码
此内容为免费资源,请登录后查看
0
免费资源

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容