lundi 1 juin 2015

How to check all dynamic child checkboxes in tree using jquery?

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"}]},{"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="http://ift.tt/1g1yFpr"></script>
<div id="regionContent">
    <input type="checkbox" id="selectAll">All Countries
    <ol></ol>
</div>



Aucun commentaire:

Enregistrer un commentaire