今天做項目遇到一個需求需要把一些機關的層級在頁面展現并附有chekbox選項框,支援全選和反選圖示:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcVnRHpFaSdVW1x2RiZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jN5gDNxkTN5ADMxUDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
效果實作代碼:
<table style="border-weight: 0px!important;" 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()+",";
});