如何勾选父子结点之间的关系以及如何

父子联动Checkbox选择

最新推荐文章于 2020-12-26 07:41:15 发布

转载最新推荐文章于 2020-12-26 07:41:15 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hansha-12/archive/2012/06/08/2542016.html

文章标签：

#json

本文介绍了一种实现父子Checkbox联动的方法，通过ID匹配实现选中状态的传递。子Checkbox被选中时，其父Checkbox也会自动选中，反之亦然。

<html>
<head>
<title>父级同选</title>
</head>
<script>
//这次写的父子联动的方法中，主要用到了id的技巧。父id和子id是有规律的，子id永远在父id的基础上进行拼接。所以直接用indexOf进行查找判断就行。
function autoSelect(canId)
{
var current=document.getElementById(canId);
var zfjc=document.getElementsByName("zfjcx");
for(var i=0;i<zfjc.length;i++)
{
   var jxcId=zfjc[i].id;
   if(canId.indexOf(jxcId)!=-1||jxcId.indexOf(canId)!=-1)       //选中一个的时候，连带父节点也要选中，所以两种情况都得考虑
      {
     if(current.checked==true)
  {
   alert(canId);
   zfjc[i].checked=true;
  }
     else
   {
     if(jxcId.indexOf(canId)!=-1)           //不勾选子节点的时候，直接把子节点去掉，其他都不用去的。
     {
     alert('---------')
      zfjc[i].checked=false;
     }
   }
   }
   }
}

//从上一个页面得到已经勾选的值，在列表中也要展现出来，即把上面勾选过的在这个列表中都展现出来
function yiXuan()
{
var yuanId="1__3"; //假设这是前面获取到的拼接的id
var geId=yuanId.split("__");

var jcxArray=document.getElementsByName("zfjcx");

for(var i=0;i<jcxArray.length;i++)
{

    for(var j=0;j<geId.length;j++)
{
     var yx="no";
if(geId[j]!='')
{
    yx="jcx"+geId[j];
}
     var jcx=jcxArray[i].id;
if(jcx.indexOf(yx)!=-1)           //在表单中id提前就做好命名规则，在这里可以直接用包含不包含来获取
{
      jcxArray[i].checked=true;
}
   }
}

}

</script>
<body>
<table>
   <tr>

        <td align="right" class="td_05"><p class="xh">1</p></td>
        <td><input name="zfjcx" id=sjxfl_fenlei1 type="checkbox" onClick="autoSelect(this.id)"></input>一、依法取得有关安全生产行政许可的情况。</td>

       </tr>
     </table>
            <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tree_tab3">
       <tr>
        <td align="right" class="td01"><img src="http://images.cnblogs.com/16B/menu_arrow.png" align="absmiddle" /></td>
        <td><input name="zfjcx" id="sjxfl_fenlei1>bm1" type="checkbox" onClick="autoSelect(this.id)"></input>1.1、依法取得有关安全生产行政许可</td>
       </tr>
     </table>
            <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tree_tab3" id="jcx01" style="display:block;">
       <tr>
        <td class="td02" align="right"><img src="http://images.cnblogs.com/16B/tree/tree_doc.gif" align="absmiddle" /></td>
        <td><input name="zfjcx" id="sjxfl_fenlei1>bm1>jcx1" type="checkbox" onClick="autoSelect(this.id)" value=1></input><a href=http://192.168.3.101:9000/cgi-bin/publish/iportal?u=http://192.168.3.101:9217/jianchaxiang/jianchaxiangneirong/1.html> 生产、经营、运输、储存、使用危险物品或者处置废弃危险物品的，由有关主管部门依照有关法律、法规的规定和国家标准或者行业标准审批并实施监督管理。</a></td>

       </tr>
      </table><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tree_tab3" id="jcx01" style="display:block;">
       <tr>
        <td class="td02" align="right"><img src="http://images.cnblogs.com/16B/tree/tree_doc.gif" align="absmiddle" /></td>
        <td><input name="zfjcx" id="sjxfl_fenlei1>bml>jcx2" type="checkbox" onClick="autoSelect(this.id)" value=2></input><a href=http://192.168.3.101:9000/cgi-bin/publish/iportal?u=http://192.168.3.101:9217/jianchaxiang/jianchaxiangneirong/2.html> 国家对危险化学品经营销售实行许可制度。经营销售危险化学品的单位，应当依照本办法取得危险化学品经营许可证（以下简称经营许可证），并凭经营许可证依法向工商行政管理部门申请办理登记注册手续。未取得经营许可证和未经工商登记注册，任何单位和个人不得经营销售危险化学品。</a></td>
       </tr>
      </table><table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tree_tab3">
       <tr>
        <td align="right" class="td01"><img src="http://images.cnblogs.com/16B/menu_arrow.png" align="absmiddle" /></td>
        <td> <input name="zfjcx" id="sjxfl_fenlei1>bm2" type="checkbox" onClick="autoSelect(this.id)"></input>1.2、安全生产行政许可有效</td>
       </tr>
     </table>
            <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" class="tree_tab3" id="jcx01" style="display:block;">
       <tr>
        <td class="td02" align="right"><img src="http://images.cnblogs.com/16B/tree/tree_doc.gif" align="absmiddle" /></td>
        <td><input name="zfjcx" id="sjxfl_fenlei1>bm2>jcx3" type="checkbox" onClick="autoSelect(this.id)" value=3 ></input><a href=http://192.168.3.101:9000/cgi-bin/publish/iportal?u=http://192.168.3.101:9217/jianchaxiang/jianchaxiangneirong/3.html> 烟花爆竹经营单位变更经营场所或者储存仓库地址、仓储设施新（该、扩）建、经营许可证有效期满的，应当重新申请办理许可手续。</a></td>
       </tr>
      </table>