checkbox树显示，全选和反选

来源：互联网发布：复活岛巨人像知乎编辑：程序博客网时间：2024/06/05 00:28

今天做项目遇到一个需求需要把一些单位的层级在页面展现并附有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