论坛首页 Web前端技术论坛

dTree树的checkbox 选中父节点,使其子节点都选中

浏览 3587 次
该帖已经被评为隐藏帖
作者 正文
   发表时间:2009-11-27  

注:topic.csdn.net/u/20071026/10/865b20c7-adde-49dc-bcf2-da7aaa6cd864.html
根据csdn朋友资料修改而来,略修改一下,更实用。

<script type="text/javascript" >

dd = new dTree( 'dd ');
dd.add(0,-1, '省市列表 ', ' ');
dd.add(1,0, ' <input type="checkbox" name="check" value="1" id="0" onClick="checkStatus(1,this)">辽宁 ');
dd.add(2,0, ' <input type="checkbox" name="check" value="2" id="0" onClick="checkStatus(2,this)">湖北 ');
dd.add(3,0, ' <input type="checkbox" name="check" value="3" id="0" onClick="checkStatus(3,this)">湖南 ');
dd.add(4,0, ' <input type="checkbox" name="check" value="4" id="0" onClick="checkStatus(4,this)">江西> ');
dd.add(5,0, ' <input type="checkbox" name="check" value="5" id="0" onClick="checkStatus(5,this)">浙江 ');
dd.add(6,5, ' <input type="checkbox" name="check" value="6" id="5" onClick="checkStatus(6,this)">杭州 ');
dd.add(7,5, ' <input type="checkbox" name="check" value="7" id="5" onClick="checkStatus(7,this)">嘉兴 ');
dd.add(8,4, ' <input type="checkbox" name="check" value="8" id="4" onClick="checkStatus(8,this)">南昌 ');
dd.add(9,4, ' <input type="checkbox" name="check" value="9" id="4" onClick="checkStatus(9,this)">九江 ');
dd.add(10,4, ' <input type="checkbox" name="check" value="10" id="4" onClick="checkStatus(10,this)">樟树 ');
dd.add(11,10, ' <input type="checkbox" name="check" value="11" id="10" onClick="checkStatus(11,this)">樟树 ');
dd.add(12,10, ' <input type="checkbox" name="check" value="12" id="10" onClick="checkStatus(12,this)">樟树 ');
dd.add(13,12, ' <input type="checkbox" name="check" value="13" id="12" onClick="checkStatus(13,this)">樟树 ');
dd.add(14,1, ' <input type="checkbox" name="check" value="14" id="1" onClick="checkStatus(14,this)">樟树 ');
document.write(dd);
function checkStatus(no,chkBox){
    var chks = document.getElementsByTagName('input');
    for(var i=0;i <chks.length;i++){
        if(chks[i].name.toLowerCase() == 'check'){
            if(chks[i].id == no){
                chks[i].checked = chkBox.checked;
                checkStatus(chks[i].value,chks[i]);
            }
        }
    }
}
</script>

 改进版:加入子目录选中,父目录自动选中功能

<a href="javascript: dd.openAll();" class="dtree">打开所有菜单</a> | <a href="javascript: dd.closeAll();" class="dtree">关闭所有菜单</a> | <a href="javascript: chkAll();" class="dtree">全部选中</a> | <a href="javascript: noChkAll();" class="dtree">全部取消</a><div style="height:300px; overflow:auto;">
            <script type="text/javascript" >
    dd = new dTree('dd');
    dd.add(0,-1, '博客后台管理 ');
dd.add(1,0, '<input type="checkbox" name="check" value="1" class="0" id="ch1" onClick="checkStatus(1,this)">后台管理');
dd.add(5,0, '<input type="checkbox" name="check" value="5" class="0" id="ch5" onClick="checkStatus(5,this)">文章管理');
dd.add(10,0, '<input type="checkbox" name="check" value="10" class="0" id="ch10" onClick="checkStatus(10,this)">标签管理');
dd.add(15,0, '<input type="checkbox" name="check" value="15" class="0" id="ch15" onClick="checkStatus(15,this)">空间管理');
dd.add(20,0, '<input type="checkbox" name="check" value="20" class="0" id="ch20" onClick="checkStatus(20,this)">消息管理');
dd.add(25,0, '<input type="checkbox" name="check" value="25" class="0" id="ch25" onClick="checkStatus(25,this)">评论管理');
dd.add(50,0, '<input type="checkbox" name="check" value="50" class="0" id="ch50" onClick="checkStatus(50,this)">密码修改');
dd.add(51,1, '<input type="checkbox" name="check" value="51" class="1" id="ch51" onClick="checkStatus(51,this)">用户管理');
dd.add(52,1, '<input type="checkbox" name="check" value="52" class="1" id="ch52" onClick="checkStatus(52,this)">地区管理');
dd.add(53,1, '<input type="checkbox" name="check" value="53" class="1" id="ch53" onClick="checkStatus(53,this)">文章类别');
dd.add(54,1, '<input type="checkbox" name="check" value="54" class="1" id="ch54" onClick="checkStatus(54,this)">空间类别');
dd.add(55,5, '<input type="checkbox" name="check" value="55" class="5" id="ch55" onClick="checkStatus(55,this)">未分类文章');
dd.add(56,10, '<input type="checkbox" name="check" value="56" class="10" id="ch56" onClick="checkStatus(56,this)">标签统计');
dd.add(57,10, '<input type="checkbox" name="check" value="57" class="10" id="ch57" onClick="checkStatus(57,this)">首页标签');
dd.add(58,15, '<input type="checkbox" name="check" value="58" class="15" id="ch58" onClick="checkStatus(58,this)">未分类空间');
dd.add(59,20, '<input type="checkbox" name="check" value="59" class="20" id="ch59" onClick="checkStatus(59,this)">已发送消息');
dd.add(61,25, '<input type="checkbox" name="check" value="61" class="25" id="ch61" onClick="checkStatus(61,this)">所有评论');
dd.add(62,5, '<input type="checkbox" name="check" value="62" class="5" id="ch62" onClick="checkStatus(62,this)">所有文章');
dd.add(63,5, '<input type="checkbox" name="check" value="63" class="5" id="ch63" onClick="checkStatus(63,this)">文章精选');
dd.add(64,5, '<input type="checkbox" name="check" value="64" class="5" id="ch64" onClick="checkStatus(64,this)">首页推荐');
dd.add(65,5, '<input type="checkbox" name="check" value="65" class="5" id="ch65" onClick="checkStatus(65,this)">已分类文章');
dd.add(66,15, '<input type="checkbox" name="check" value="66" class="15" id="ch66" onClick="checkStatus(66,this)">所有空间');
dd.add(67,15, '<input type="checkbox" name="check" value="67" class="15" id="ch67" onClick="checkStatus(67,this)">空间精选');
dd.add(68,15, '<input type="checkbox" name="check" value="68" class="15" id="ch68" onClick="checkStatus(68,this)">首页推荐');
dd.add(69,15, '<input type="checkbox" name="check" value="69" class="15" id="ch69" onClick="checkStatus(69,this)">已分类空间');
dd.add(70,1, '<input type="checkbox" name="check" value="70" class="1" id="ch70" onClick="checkStatus(70,this)">后台菜单');
dd.add(89,65, '<input type="checkbox" name="check" value="89" class="65" id="ch89" onClick="checkStatus(89,this)">企业文化');
dd.add(90,65, '<input type="checkbox" name="check" value="90" class="65" id="ch90" onClick="checkStatus(90,this)">人力资源');
dd.add(95,65, '<input type="checkbox" name="check" value="95" class="65" id="ch95" onClick="checkStatus(95,this)">找工作');
dd.add(96,65, '<input type="checkbox" name="check" value="96" class="65" id="ch96" onClick="checkStatus(96,this)">网络招聘');
dd.add(103,65, '<input type="checkbox" name="check" value="103" class="65" id="ch103" onClick="checkStatus(103,this)">公司制度');
dd.add(114,69, '<input type="checkbox" name="check" value="114" class="69" id="ch114" onClick="checkStatus(114,this)">事业成长');
dd.add(115,69, '<input type="checkbox" name="check" value="115" class="69" id="ch115" onClick="checkStatus(115,this)">杂人杂记');
dd.add(117,69, '<input type="checkbox" name="check" value="117" class="69" id="ch117" onClick="checkStatus(117,this)">名人博客');
dd.add(118,69, '<input type="checkbox" name="check" value="118" class="69" id="ch118" onClick="checkStatus(118,this)">冷暖人生');
    document.write(dd);
    function checkStatus(no,chkBox){
      checkPar(chkBox);//当子目录选中时,父目录也选中
      var chks = document.getElementsByTagName('input');//得到所有input
      for(var i=0;i <chks.length;i++){
        if(chks[i].name.toLowerCase() == 'check'){//得到所名为check的input
          if(chks[i].className == no){//ID等于传进父目录ID时
            chks[i].checked = chkBox.checked;//保持选中状态和父目录一致
            checkStatus(chks[i].value,chks[i]);//递归保持所有的子目录选中
          }
        }
      }
    }
   
    function checkPar(chkBox) {
      if(chkBox.name.toLowerCase() == 'check' && chkBox.checked && chkBox.className != 0) {//判断本单击为选中,并且不是根目录,则选中父目录
        var chkObject = document.getElementById("ch"+chkBox.className);//得到父目录对象
        chkObject.checked=true;
        checkPar(chkObject);
      }
    }
function chkAll() {
$("input[name='check']").attr("checked",true);
}
function noChkAll(){
$("input[name='check']").attr("checked",false);
}
</script>

 注意,使用时,请务必保证name="check" 是tree里的,如果有其它的名字冲突,会影响效果。
以id重复来达到效果,并不符合id唯一设计要求,但是这里足以满足这个需求,大家有好的意见,请跟贴。

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics