Javascript 如何使用jquery查找和检查树中的所有动态子复选框？

我已将复选框动态添加到所有元素，并成功添加了选择所有复选框的功能，但无法在树结构中选择父子复选框，这意味着如果我选择“亚洲”，则应选择所有“东亚”和“南亚”，如果我选择东亚，它应该选择所有国家，反之亦然

var json={“亚洲”：[{“地区名”：[{“地区名”：“东亚”，“国家名单”：[{“国家名”：“中国”，“次国家名单”：[{“次国家名”：“中国南部”}，{“次国家名”：“中国东部”}，{“国家名”：“香港”}，{“地区名”：“南亚”，“国家名单”：[{“国家名”：“印度”}，{“国家名”：“巴基斯坦”}]}}}；
var html=''；
$.each（json，函数（i1，对象）{
html+='
'+i1+'；
$.each（对象、函数（i2、大陆）{
html+='
'；
$.each（洲.地区列表，函数（i3，地区）{
html+='
'+region.regionName+''；
$.each（region.Countrylist，函数（i4，国家）{
html+='
'+country.countryName；
if（国家/次国家/地区列表）{
$.each（country.subCountryList，函数（i5，subCountry）{
html+='
'+subCountry.subCountryName+'
'；
});
};
html+='
'；
});
html+='
'；
});
html+='
'；
});
html+='
'；
});
$（'#regionContent ol'）.html（html）；
$（'#selectAll'）。单击（函数（）{
如果（选中此项）{
$（“#regionContent输入[type=“checkbox”]”）。每个（函数（）{
this.checked=true；
});
}否则{
$（“#regionContent输入[type=“checkbox”]”）。每个（函数（）{
此项检查=错误；
});
}
});
li，ol{列表样式：无；}

所有国家
尝试以下方法：

$this.children('input[type="checkbox"]').prop('checked', true);

下面将使用
find
而不是
children
选中所有子项复选框，深度超过1级

$(document.body).on('change', 'input[type=checkbox]', function(){
    if($(this).is(':checked')){
        $(this).find('input[type="checkbox"]').prop('checked', true);
    }
});

你可以把工作一分为二

根据当前复选框的状态标记子节点
遍历父节点并根据它们的状态标记它们的状态
立即子节点状态
编辑：


var json={
亚洲：[{
地区列表：[{
地区名称：“东亚”，
国家名单：[{
国名：“中国”，
次国家名单：[{
次县名：“中国南方”
}]
}, {
国名：“香港”
}]
}, {
地区名称：“南亚”，
国家名单：[{
国名：“印度”
}, {
国名：“巴基斯坦”
}]
}]
}]
};
var html=''；
$.each（json，函数（i1，对象）{
html+='
'+i1+'；
$.each（对象、函数（i2、大陆）{
html+='
'；
$.each（洲.地区列表，函数（i3，地区）{
html+='
'+region.regionName+'
'；
$.each（region.Countrylist，函数（i4，国家）{
html+='
'+country.countryName；
if（国家/次国家/地区列表）{
html+='
'；
$.each（country.subCountryList，函数（i5，subCountry）{
html+='
'+subCountry.subCountryName+'
'；
});
html+='
'；
};
html+='
'；
});
html+='
'；
});
html+='
'；
});
html+='
'；
});
$（函数（）{
$（'#list'）.html（html）；
$（“#regionContent”）。在（'change'、'input[type=checkbox]、onChange）上；
});
var topNodes=函数（chkbx）{
返回$（chkbx）.最近（'ul'）.最近（'li'）；
};
var markTopNodes=函数（节点）{
如果（！nodes.length）返回；
var chkbx=nodes.children（'input'）.eq（0）；//parent复选框
//获取节点的直接li
var lis=节点、子节点（'ul'）、子节点（'li'）；
//获取未选中复选框的计数
var count=lis.children（'input[type=checkbox]：not（：checked'））。长度；
//如果计数为0，则标记
chkbx.prop（'checked'，！（count））；
//对其他顶级节点的递归调用
markTopNodes（topNodes（chkbx））；
};
var onChange=函数（e）{
//对于子节点，选中状态=当前复选框选中状态
$（this.closest（'li'）.find（'input[type=checkbox]）.prop（'checked'，this.checked）；
//对于父节点，如果检查了直接子节点，则会进行检查，但会以递归方式进行检查
标记topNodes（topNodes（this））；
};
li{
列表样式：无；
}



所有国家



select all正在工作。但是我需要实现树结构。你能用粗体标记挑出有子元素的元素：$（'b'）。on（'click'，function（）{if（$（this）.checked）{$this.children（'input[type=“checkbox”]'））.prop（'checked'，true）；}else{$this.children（'input[type=“checkbox”]'））.prop（'checked'，true）;         }我不能选择复选框元素。你能把你的代码添加到小提琴上吗？我只是想指出，在你的jQuery代码的大小上，使用模板引擎之类的东西会更容易阅读/管理。我要说的是，复杂性似乎保证了一个MV*框架，或者我个人最喜欢的框架，我知道它更容易理解使用这些极好的框架完成此任务。但我没有选择使用这些：（我明白了，我对这个练习太了解了…快乐的编码，anyway@mrp这似乎是你想要的，如果没有，你能详细说明一下吗？@Arvind它与Chrome、FF、IE10配合得很好。但是当涉及到IE8时，树结构完全不起作用。我使用的是jquery版本1.9.1，它应该支持你使用的所有方法，但我不知道它为什么会坏。请提出解决方案。谢谢。