问一个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"/> 选项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>
给父节点添加了一个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"/> 选项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]" option="1"/> 选项1
<td><input class="inputcheckbox" type="checkbox" name="ids[11][2]" option="2"/> 选项2
<td><input class="inputcheckbox" type="checkbox" name="ids[11][3]" option="3"/> 选项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"/> 选项1
<td><input class="inputcheckbox" type="checkbox" name="ids[110][2]" option="2"/> 选项2
<td><input class="inputcheckbox" type="checkbox" name="ids[110][3]" option="3"/> 选项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]"/> 选项1
<td><input class="inputcheckbox" type="checkbox" name="ids[112][2]"/> 选项2
<td><input class="inputcheckbox" type="checkbox" name="ids[112][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]"/> 选项1
<td><input class="inputcheckbox" type="checkbox" name="ids[3][2]"/> 选项2
<td><input class="inputcheckbox" type="checkbox" name="ids[3][3]"/> 选项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>