¿Cómo encontrar y marcar todas las casillas de verificación de elementos dynamics en el árbol usando jquery?

He agregado casillas de verificación dinámicamente a todo el elemento y he agregado con éxito la funcionalidad para seleccionar todas las casillas de verificación, pero no puedo hacer la selección de las casillas de verificación del elemento primario en la estructura de árbol significa que si selecciono “Asia” debería seleccionar todas “Estern Asia “y” Asia meridional “, si selecciono Estern Asia, debería seleccionar todo el país y viceversa.

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

      Puedes dividir el trabajo en dos.

      1. Marque los nodos secundarios según el estado de la checkbox actual.
      2. Recorra los nodos principales y marque su estado según su estado de nodo secundario inmediato.

      Editado:

       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 += '
    1. ' + 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 += '
    2. '; }); $(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

        Intenta algo en este sentido:

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

        Lo siguiente marcará todas las casillas de verificación de los niños, más allá de 1 nivel usando find lugar de children .

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