checkbox级联选择

 

今天需要级联选择子元素,我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。

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值