今天需要级联选择子元素,我JavaScript很烂,也没系统的学过,以前总觉得JavaScript没什么意思不愿学,但现在做web开发又离不了,ajax又用的这么多,才感觉自己当初太挑食了。网上查了一下,写了个函数实现如下:
function selectSon(sel){
for(var i=0;i<document.all("nodeid").length;i++){
if(document.all("nodeid")[i].getAttribute("parentId")==sel.id)
document.all("nodeid")[i].checked=sel.checked;
}
}
jsp代码:
...
<td class="rightTd">
<table>
<%
for (int i = 0; i < nodeList.size(); i++) {
%>
<%if(((String)((Map) nodeList.get(i)).get("type")).trim().equals("2")){ %>
<tr>
<td width="30%">
<input type="checkbox" name="node<%=i%>" id="node<%=i%>" οnclick="selectSon(this)"
value=""/><%=((Map) nodeList.get(i)).get("name")%>
</td>
<td>
<%
int b=0;
for (int j = 0; j < nodeList.size(); j++) {
if(((Integer)((Map) nodeList.get(j)).get("parentid")).intValue()==(Integer)((Map) nodeList.get(i)).get("id")){
b++;
%> <%if(b!=0&&b%4==0){%><br><%} %>
<input type="checkbox" name="nodeid"
value="<%=((Map) nodeList.get(j)).get("id")%>" parentId="node<%=i%>"/><%=((Map) nodeList.get(j)).get("name")%>
<%}}%>
</td>
</tr>
<%}}%>
</table>
</td>
...
上面的都是项目里面直接复制的,挺丑的,直接拷过来了,以备以后需要。
要级联选择时,关键是子元素要定义一个父id,将父与子关联起来(红色显示),在上面的JavaScript函数中的就是这句:
document.all("nodeid")[i].getAttribute("parentId")==sel.id;
其中sel就是父元素,当onclick()时就会触发关联,并将子元素的checked属性设置为与父元素相同就行了,如下:
document.all("nodeid")[i].checked=sel.checked。