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

Question

我已经动态地向所有元素添加了复选框，并成功添加了选择所有复选框的功能但是无法在树结构中选择父子复选框意味着如果我选择“亚洲”它应该选择全部“Estern Asia”和“Southern 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 += '<li><input type="checkbox" /><b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>';
  $.each(object, function(i2, continent) {
    html += '<ul>';
    $.each(continent.regionList, function(i3, region) {
    	html += '<li><input type="checkbox" /><b>' + region.regionName + '</b>';
    	$.each(region.Countrylist, function(i4, country) {
    		html += '<ul><li><input type="checkbox" />' + country.countryName;
    		if (country.subCountryList) {
    		$.each(country.subCountryList, function(i5, subCountry) {
    			html += '<ul><li><input type="checkbox" />' + subCountry.subCountryName + '</li></ul>';
    		});
    	};
    	html += '</li></ul>';
    });
    html += '</li>';
  });
  html += '</ul>';
 });
 html += '</li>';
});

$('#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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="regionContent">
    <input type="checkbox" id="selectAll">All Countries
    <ol></ol>
</div>

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 += '<li><input type="checkbox"/><b><a name="' + i1 + '" >' + i1 + '</a></b>';
  $.each(object, function(i2, continent) {
    html += '<ul>';
    $.each(continent.regionList, function(i3, region) {
      html += '<li><input type="checkbox"/><b>' + region.regionName + '</b><ul>';
      $.each(region.Countrylist, function(i4, country) {
        html += '<li><input type="checkbox"/>' + country.countryName;
        if (country.subCountryList) {
          html += '<ul>';
          $.each(country.subCountryList, function(i5, subCountry) {
            html += '<li><input type="checkbox"/>' + subCountry.subCountryName + '</li>';
          });
          html += '</ul>';
        };
        html += '</li>';
      });
      html += '</ul></li>';
    });
    html += '</ul>';
  });
  html += '</li>';
});

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="regionContent">
  <ul>
    <!-- updated the html here -->
    <li>
      <input type='checkbox' />All Countries
      <ul id='list'></ul>
      <!-- added this -->
      <li>
  </ul>
</div>

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);
    }
});