问一个checkbox点中后自动选中此类别下子选项checkbox的有关问题

问一个checkbox点中后自动选中此类别下子选项checkbox的问题

因为是程序循环出来的，td选项的属性name class都不能改变，仅用现在提供的属性结构，能不能做到点选总类子选项，分类的子选项也会选中

例：点选总类一下的选项1，总类一下所有分类的选项1也会被选中                                CheckBox                  HTML              
[解决办法]
<script type="text/javascript"> 
    function getElementsByClassName(className, element) {
        var children = (element 
[解决办法]
 document).getElementsByTagName('*');
        var elements = new Array();
       
 
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
   window.onload = function(){
        var table = document.getElementById('table');
        table.onclick = function(e){
            e = e 
[解决办法]
 window.event;
            var tar = e.target 
[解决办法]
 e.srcElement;
            if(tar.tagName!='INPUT'){
                return;
            }
            if(tar.type!='checkbox'){
                return;
            }
            
            var parent = tar.parentNode.parentNode;
            var isParent = parent.className == '' && parent.className.indexOf('child-of-node')==-1
            if(isParent){
                var parentId = parent.id.split('-')[1];
                var childClass = 'child-of-node-'+parentId;
                var tarOption = tar.getAttribute('option');
                var childTr = getElementsByClassName(childClass,table),len=childTr.length;
                for(var i=0;i<len;i++){
                    var childId = childTr[i].id.split('-')[1]; 
 
                    var shouldCheckName = 'ids['+childId+']['+tarOption+']';
                    var checkes = document.getElementsByName(shouldCheckName);
                    var inputlen = checkes.length;
                    for(var j=0;j<inputlen;j++){
                        checkes[j].checked = tar.checked;
                    }
                }
            }
        }
    }
</script>
  <table id="table">
<tr id="node-1">
   <td>总类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]" option="3"/>&nbsp;选项3
</tr>
<tr id="node-10" class="child-of-node-1">
   <td>总类一 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/>&nbsp;选项3
</tr>
<tr id="node-11" class="child-of-node-1">
   <td>总类一 分类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]"/>&nbsp;选项3
 </tr>
 
<tr id="node-2">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]" option="3"/>&nbsp;选项3
</tr>
<tr id="node-20" class="child-of-node-2">
   <td>总类二 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/>&nbsp;选项3 
 
</tr>
<tr id="node-3">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]" option="3"/>&nbsp;选项3
</tr>
</table>


给父节点添加了一个option属性。。。用来获取第几个选项的，虽然可以分析name去搞，但是我实在是懒得去分析。。。
[解决办法]
无限级选中。


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
    function getElementsByClassName(className, element) {
        var children = (element 
[解决办法]
 document).getElementsByTagName('*');
        var elements = new Array();
      
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
    function checkAllChild(parent,tar){
        var self = arguments.callee;
        var parentId = parent.id.split('-')[1];
        var childClass = 'child-of-node-'+parentId;
        var tarOption = tar.getAttribute('option');
        var childTr = getElementsByClassName(childClass,table),len=childTr.length;
        for(var i=0;i<len;i++){
            var childId = childTr[i].id.split('-')[1];
            var shouldCheckName = 'ids['+childId+']['+tarOption+']';
            var checkes = document.getElementsByName(shouldCheckName); 
 
            var inputlen = checkes.length;
            for(var j=0;j<inputlen;j++){
                checkes[j].checked = tar.checked;
            }
            var hasChild = getElementsByClassName('child-of-node-'+childId,table).length==0 ? false : true;
            if(hasChild){
                self(childTr[i],tar);
            }
        }
    }
    window.onload = function(){
        var table = document.getElementById('table');
        table.onclick = function(e){
            e = e 
[解决办法]
 window.event;
            var tar = e.target 
[解决办法]
 e.srcElement;
            if(tar.tagName!='INPUT'){
                return;
            }
            if(tar.type!='checkbox'){
                return;
            }
            
            var parent = tar.parentNode.parentNode;
            
            checkAllChild(parent,tar);
        }
    }
</script>
  <table id="table">
<tr id="node-1">
   <td>总类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]" option="3"/>&nbsp;选项3
</tr>
<tr id="node-10" class="child-of-node-1">
   <td>总类一 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/>&nbsp;选项3
</tr>
<tr id="node-11" class="child-of-node-1">
   <td>总类一 分类二</td> 
 
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]" option="3"/>&nbsp;选项3
 </tr>
 <tr id="node-110" class="child-of-node-11">
   <td>总类一 分类二 分类1</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[110][3]" option="3"/>&nbsp;选项3
 </tr>
  <tr id="node-112" class="child-of-node-110">
   <td>总类一 分类二 分类1 分类A</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[112][3]"/>&nbsp;选项3
 </tr>
<tr id="node-2">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]" option="1"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]" option="2"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]" option="3"/>&nbsp;选项3
</tr>
<tr id="node-20" class="child-of-node-2">
   <td>总类二 分类一</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/>&nbsp;选项3
</tr>
<tr id="node-3">
   <td>总类二</td>
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]"/>&nbsp;选项1
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]"/>&nbsp;选项2
   <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]"/>&nbsp;选项3
</tr>
</table>
  

[解决办法]
先给个思路，是按照name实现的，用jquery
1 总类是有option属性的选项，给这些选项加上点击事件
2 寻找总类选项的两部分内容:第一个]之前的（不包括],记为a）和最后一个[之后的（包括[记为b）
3 将所有选项中以a开头并且以b结尾的选上
[解决办法]
给一个jquery版的，测试前请引入jquery.js。不用修改任何代码，加入这段js即可
<script language="javascript">
$('table tr[id^=node-]:not([class]) input[type=checkbox]').bind('click', function(){
var text = this.nextSibling.nodeValue, checked = $(this).attr('checked') ? $(this).attr('checked') : false;
$.each($('table tr.child-of-' + $(this).parents('tr[id^=node-]').attr('id')).find('td'), function() { 
 
if ($(this).text() == text) {
$(this).find('input').attr('checked', checked);
}
});
});
</script>

[解决办法]
 也是jquery版本的，已经测试可行，请引入jquery再实验。另外html代码是作者发的原始的
<script language="javascript">
$(function(){
$(":checkbox").click(function(){
//添加单击事件，分析发现，总类的tr是没有class属性的
if($(this).parents("tr").attr("class")==""){
//获取多选框的name
var n=this.name;
//获取第一个]之前的部分(不包含])
var firstIndex=n.indexOf(']');
var a=n.substring(0,firstIndex)
//获取最后一个[之后的部分(包含[)
var lastIndex=n.lastIndexOf('[');
var b=n.substring(lastIndex);
//相应的子选项选上(name以a开头，以b结尾)
if(this.checked){
$(":checkbox[name^='"+a+"'][name$='"+b+"']").attr("checked",true);
}else{
$(":checkbox[name^='"+a+"'][name$='"+b+"']").attr("checked",false);
}
}
});
});
</script>