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

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

var json ={"Asia": [{"regionList": [{"regionName": "Eastern Asia","Countrylist": [{"countryName": "China","subCountryList": [{"subCountryName": "Southern China"},{"subCountryName": "Eastern China"}]},{"countryName": "Hong Kong"}]},{"regionName": "Southern Asia","Countrylist": [{"countryName": "India"},{"countryName": "Pakistan"}]}]}]}; var html = ''; $.each(json, function(i1, object) { html += '
' + i1 + ''; $.each(object, function(i2, continent) { html += '
'; $.each(continent.regionList, function(i3, region) { html += '
' + region.regionName + ''; $.each(region.Countrylist, function(i4, country) { html += '
' + country.countryName; if (country.subCountryList) { $.each(country.subCountryList, function(i5, subCountry) { html += '
' + subCountry.subCountryName + '
'; }); }; html += '
'; }); html += '
'; }); html += '
'; }); html += '
'; }); $('#regionContent ol').html(html); $('#selectAll').click(function() { if(this.checked) { $('#regionContent input[type="checkbox"]').each(function() { this.checked = true; }); }else{ $('#regionContent input[type="checkbox"]').each(function() { this.checked = false; }); } }); 

 li, ol{list-style:none;} 

  
 All Countries 
  

Answer 1

您可以将工作分成两部分。

1. 根据当前复选框的状态标记子节点。
2. 遍历父节点并根据其直接子节点状态标记其状态。

编辑：

 var json = { Asia: [{ regionList: [{ regionName: "Eastern Asia", Countrylist: [{ countryName: "China", subCountryList: [{ subCountryName: "Southern China" }] }, { countryName: "Hong Kong" }] }, { regionName: "Southern Asia", Countrylist: [{ countryName: "India" }, { countryName: "Pakistan" }] }] }] }; var html = ''; $.each(json, function(i1, object) { html += '
' + i1 + ''; $.each(object, function(i2, continent) { html += '
'; $.each(continent.regionList, function(i3, region) { html += '
' + region.regionName + '
'; $.each(region.Countrylist, function(i4, country) { html += '
' + country.countryName; if (country.subCountryList) { html += '
'; $.each(country.subCountryList, function(i5, subCountry) { html += '
' + subCountry.subCountryName + '
'; }); html += '
'; }; html += '
'; }); html += '
'; }); html += '
'; }); html += '
'; }); $(function() { $('#list').html(html); $('#regionContent').on('change', 'input[type=checkbox]', onChange); }); var topNodes = function(chkbx) { return $(chkbx).closest('ul').closest('li'); }; var markTopNodes = function(nodes) { if (!nodes.length) return; var chkbx = nodes.children('input').eq(0); //parent checkbox //get the immediate li's of the node var lis = nodes.children('ul').children('li'); //get count of un-checked checkboxes var count = lis.children('input[type=checkbox]:not(:checked)').length; //mark if count is 0 chkbx.prop('checked', !(count)); //recursive call for other top nodes markTopNodes(topNodes(chkbx)); }; var onChange = function(e) { //for child nodes, checked state = current checkbox checked state $(this).closest('li').find('input[type=checkbox]').prop('checked', this.checked); //for parent nodes, checked if immediate childs are checked, but recursively markTopNodes(topNodes(this)); }; 

 li { list-style: none; } 

  
 
  
 All Countries 
  
 
  

Answer 2

尝试这些方面的东西：

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

Answer 3

以下将使用find而非children检查所有子复选框，深度超过1级。

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