checkbox树显示,全选和反选

今天做项目遇到一个需求需要把一些单位的层级在页面展现并附有chekbox选项框,支持全选和反选图示:

效果实现代码:

<table style="border-weight: 0px!important;" border="0" cellpadding="0px" cellspacing="8px" >
							<c:forEach items="${unsign}" var="orgp" varStatus="gstatus">
							<tr class="${orgp.id}">
								<td style="border-width: 0px;">
								   	<label>
									   	<input style="margin-top: 0px;" type="checkbox"  value="${orgp.orgName}" name="parentAddress" id="${orgp.id}"/>
										<span class="" style="font-weight:bold">${orgp.orgName}</span>
								   	</label>
								</td>
								<c:forEach items="${orgp.childs}" var="child" varStatus="accountStatus">
									<c:if test="${accountStatus.count==1}"><tr class="${orgp.id}" style="border-width: 0px;"></c:if>
										<td width="120px" style="padding-left:13px; border-width: 0px;">
											<label>
												<input id="${child.c_id}" style="margin-top: 0px;" type="checkbox"  value="${child.c_id}" name="address" />
												<span class="${child.c_id}">${child.c_recivername}</span>
											</label>
										</td>
									<c:if test="${(accountStatus.count)%4==0}">
										<tr class=""></tr>
									</c:if>
									<c:if test="${(accountStatus.count)%4!=0&&accountStatus.last}">  
										<tr class=""></tr>
									</c:if> 
								</c:forEach>
						   </tr>
						</c:forEach> 
						</table>
全选和反选代码:

//全选/反选
	 $("input[name='uparentAddress']").on('click',function(){
		if(this.checked){
			$('tr[class='+$(this).parents('tr').attr('class')+']').find("input[name='uaddress']").each(function(){
				$(this).prop("checked",true);
			});
		}else{
			$('tr[class='+$(this).parents('tr').attr('class')+']').find("input[name='uaddress']").each(function(){
				$(this).prop('checked',false);
			});
			
		}
	}); 
单选

$("input[name='address']").on('click',function(){
		var flag = true;
		var aa = $(this).parents('tr').attr('class');
		var p = $(this).parents('tr').parents('tr').find('input[id="'+aa+'"]');
		$(this).parents('tr').find('.'+aa).find('input[name="address"]').each(function(){
			if($(this).prop('checked')==false){
				flag = false;
			}
		});
		if(flag==true){
			p.prop('checked',true);
		}else{
			p.prop('checked',false);
		}
	});
获取checkbox选中的值:

var id='';
$('input[name="address"]:checked').each(function(){
		id += $(this).val()+",";
});


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值