How to find and check all dynamic child checkboxes

Question

I have added check-boxes dynamically to all the element and successfully added the functionality to select all checkboxes but not able to do the selection for the parent child checkboxes in tree structure means if i select the "Asia" it should select all "Estern Asia" and "Southern Asia", if i select Estern Asia it should select all country and vice versa.

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

try something along these lines:

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

Answer 2

You can split the work into two.

1. Mark the child nodes as per the state of the current checkbox.
2. Walk through the parent nodes and mark their state as per their immediate child node state.

Edited:

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 3

The following will check all children checkboxes, deeper than 1 level using find rather than children.

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