Checking all check box does not work on a created function

Question

function toggleTree(layergroupID) {
  $("#LayerUL" + layergroupID).slideToggle(function() {
    if ($(this).is(':hidden')) {
      $("#layerCollaspe" + layergroupID).addClass("glyphicon-plus");
      $("#layerCollaspe" + layergroupID).removeClass("glyphicon-minus");
    } else {
      $("#layerCollaspe" + layergroupID).removeClass("glyphicon-plus");
      $("#layerCollaspe" + layergroupID).addClass("glyphicon-minus");
    }
  });
}

function chkAll(layergroupID) {

  $("#LayerUL1 li input[type='checkbox']").prop('checked', this.checked);

  if (($("#chk-layer" + layergroupID).prop("checked") == true && ($("#LayerUL" + layergroupID).is(':hidden')))) {
    toggleTree(layergroupID);
  } else if (($("#chk-layer" + layergroupID).prop("checked") == false) && ($("#LayerUL" + layergroupID).is(':visible'))) {
    toggleTree(layergroupID);
  }
}

function loadLayerGroups() {
  $('#tbl tr').remove();
  $.ajax({
    url: "../getLayerGroups",
    datatype: 'json',
    type: 'GET',
    success: function(data) {
      for (var i = 0; i <= data.length - 1; i++) {


        var layerGroupID = data[i].LAYERGROUPID;
        var liID = "layer" + layerGroupID;

        var chkboxID = "layerCollaspe" + layerGroupID;
        var markup = " <li id='" + liID + "' >"

          +
          "<i class='glyphicon glyphicon-plus' id='" + chkboxID + "'" +
          " onclick='toggleTree(" + layerGroupID + ")'></i>"

          +
          "<input type='checkbox' id='chk-layer" + layerGroupID + "' onclick='chkAll(" + layerGroupID + ")'>"

          +
          data[i].GROUPNAME + "</i></li>" +
          "<ul id='LayerUL" + layerGroupID + "'></ul>"

        $("#ulLayer").append(markup);
        getChild(layerGroupID);

        $("#LayerUL" + layerGroupID).hide();
      }

    },
    error: function(textStatus, errorThrown) {
      console.log(errorThrown);
    }
  });
}

function getChild(layerGroupID) {
  $.ajax({
    url: "../getLayer",
    datatype: 'json',
    type: 'GET',
    data: {
      LAYERGROUPID: layerGroupID
    },
    success: function(data2) {

      for (var x = 0; x <= data2.length - 1; x++) {
        var markup2 = "<li>" +
          "<label class='checkbox-inline'>" +
          "<input type='checkbox' class='chkLL' value='" + data2[x].CLASSID + "'>" +
          data2[x].DISPLAYNAME +
          "</label>" +
          "</li>";
        $("#LayerUL" + layerGroupID).append(markup2);

      }

    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6">
    <div id="treeview-checkbox-demo">
      <ul id="ulLayer" class="Layers">
      </ul>

    </div>
  </div>
</div>

SO i have this code that get a list from database. The list have parent and child like this:

This is the List

When i click the basemap chck box all the checkboxes bellow the basemap will be checked

when i create a jquery function like the code below it works. all the checkbox get checked.

$("#chk-layer" + layergroupID)click(function () {
     $("#LayerUL" + layergroupID + " li input[type='checkbox']").prop('checked', this.checked);
})

but then when i tried to create function like this:

 function chkAll(layergroupID)
{
  $("#LayerUL" + layergroupID + " li input[type='checkbox']").prop('checked', this.checked);
}

i get all the parameter and the only problem is that the checkbox does it does not work.

i need a function because i pass a parameter from the data of ajax. when i create the jquery function inside the ajax the parameter that i get is from the last item.

thanks in advance

UPDATED

This is how i call the function

+ "<input type='checkbox' id='chk-layer" + layerGroupID + "' onclick='chkAll(" + layerGroupID + ")'>"

2nd EDIT

There is a ajax function that will populate the ulLayers

function loadLayerGroups() {
    $('#tbl tr').remove();
    $.ajax({
        url: "../getLayerGroups",
        datatype: 'json',
        type: 'GET',
        success: function (data) {
            for (var i = 0 ; i <= data.length - 1; i++) {


                var layerGroupID = data[i].LAYERGROUPID;
                var liID = "layer" + layerGroupID;

                var chkboxID = "layerCollaspe" + layerGroupID;
                var markup = " <li id='" + liID + "' >"
                    + "<i class='glyphicon glyphicon-plus' id='" + chkboxID +  "'"
                    + " onclick='toggleTree(" + layerGroupID + ")'></i>"
                    + "<input type='checkbox' id='chk-layer" + layerGroupID + "' onclick='chkAll(" + layerGroupID + ")'>"
                    + data[i].GROUPNAME + "</i></li>"
                    + "<ul id='LayerUL" + layerGroupID + "'></ul>"

                $("#ulLayer").append(markup);
                getChild(layerGroupID);

                $("#LayerUL" + layerGroupID).hide();
            }

        },
        error: function (textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
}

This is the 2nd ajax Function that will populate the LayerUL

function getChild(layerGroupID)
    {
        $.ajax({
            url: "../getLayer",
            datatype: 'json',
            type: 'GET',
            data: { LAYERGROUPID: layerGroupID },
            success: function (data2) {

                for (var x = 0 ; x <= data2.length - 1; x++) {

                    var markup2 = "<li>"
                   + "<input type='checkbox' class='chkBox-" + layerGroupID + "' value='" + data2[x].CLASSID + "'>"
                   + data2[x].DISPLAYNAME + "</li>";
                    $("#LayerUL" + layerGroupID).append(markup2);

                }

            }
        });
    }

Answer 1

As HTML is not available, below is the generic code which will attach event to any checkbox whose id starts with chk-layer and in event handler same text has been replaced to get the layer id.

Change your code like below.

$(document).ready(function(){
   $(document).on('change','input[type="checkbox"][id^="chk-layer"]' function() {  
       $("#LayerUL " + this.id.replace("chk-layer","") + " li input[type='checkbox']").prop('checked', this.checked); 
   }); 
});

Also if you are having select all checkbox in the same ul and want to check all checkboxes of that ul then you can attempt like following by adding class to select all checkbox like below.

$(document).ready(function() {
  $(document).on('change', '.chkAll', function() {
    $(this).parent().next().find(":checkbox").prop("checked", this.checked);
  });
});

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-6">
    <div id="treeview-checkbox-demo">
      <ul id="ulLayer" class="Layers">

        <li id="Layer1">
          <input type="checkbox" class="chkAll" id="chk-layerLayer1"> Select All
        </li>
        <li>
          <ul id="LayerULLayer1">
            <li>
              <input type="checkbox"> Child 1
            </li>
            <li>
              <input type="checkbox"> Child 2
            </li>
            <li>
              <input type="checkbox"> Child 3
            </li>
          </ul>
        </li>

        <li id="Layer1">
          <input type="checkbox" class="chkAll" id="chk-layerLayer1"> Select All
        </li>
        <li>
          <ul id="LayerULLayer1">
            <li>
              <input type="checkbox"> Child 1
            </li>
            <li>
              <input type="checkbox"> Child 2
            </li>
            <li>
              <input type="checkbox"> Child 3
            </li>
          </ul>
        </li>

      </ul>

    </div>
  </div>
</div>

Answer 2

in function chkAll() , you can't use $(this)

Answer 3

I already found a simple solution that allows the checkbox to be check.

 $("#LayerUL" + layergroupID + " li input[type='checkbox']").trigger('click');

triggering it will check the checkbox and will trigger the event problem solve.

Thanks anyway