checkbox点中后自动选中此类别下子选项checkbox的问题
<table> <tr id="node-1"> <td>总类一</td> <td><input class="inputcheckbox" type="checkbox" name="ids[1][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]"/> 选项3 <tr id="node-10" class="child-of-node-1"> <td>总类一 分类一</td> <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/> 选项3 <tr id="node-11" class="child-of-node-1"> <td>总类一 分类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]"/> 选项3 <tr id="node-2"> <td>总类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]"/> 选项3 <tr id="node-20" class="child-of-node-2"> <td>总类二 分类一</td> <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/> 选项3 <tr id="node-3"> <td>总类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]"/> 选项3 </table>
因为是程序循环出来的，td选项的属性name class都不能改变，仅用现在提供的属性结构，能不能做到点选总类子选项，分类的子选项也会选中
例：点选总类一下的选项1，总类一下所有分类的选项1也会被选中
<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"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[1][2]" option="2"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[1][3]" option="3"/> 选项3 </tr> <tr id="node-10" class="child-of-node-1"> <td>总类一 分类一</td> <td><input class="inputcheckbox" type="checkbox" name="ids[10][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[10][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[10][3]"/> 选项3 </tr> <tr id="node-11" class="child-of-node-1"> <td>总类一 分类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[11][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[11][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[11][3]"/> 选项3 </tr> <tr id="node-2"> <td>总类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[2][1]" option="1"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[2][2]" option="2"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[2][3]" option="3"/> 选项3 </tr> <tr id="node-20" class="child-of-node-2"> <td>总类二 分类一</td> <td><input class="inputcheckbox" type="checkbox" name="ids[20][1]"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[20][2]"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[20][3]"/> 选项3 </tr> <tr id="node-3"> <td>总类二</td> <td><input class="inputcheckbox" type="checkbox" name="ids[3][1]" option="1"/> 选项1 <td><input class="inputcheckbox" type="checkbox" name="ids[3][2]" option="2"/> 选项2 <td><input class="inputcheckbox" type="checkbox" name="ids[3][3]" option="3"/> 选项3 </tr> </table>
无限级选中。