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

                }

            }
        });
    }

which context does `this` *$(this).prop('checked')* points to in the function? — guradio, Jun 30 '17 at 03:50
to the child of layer 1 i also tried $("#LayerUL" + layergroupID + " li input[type='checkbox']").prop('checked','checked'); but it doest not work also — gray, Jun 30 '17 at 03:55

Prashant Shirke · Answer 1 · 2017-06-30T06:43:18.953

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>

$("#LayerUL" + layergroupID + " li input[type='checkbox']") this is the child of layer 1 that i will need to check — gray, Jun 30 '17 at 04:07
i tried this $("#LayerUL" + layergroupID + " li input[type='checkbox']").prop('checked', $("#LayerUL" + layergroupID + " li input[type='checkbox']").is(":checked")); but it does not work also — gray, Jun 30 '17 at 04:08
it is always good if you add html, jQuery code in question. Anyways pls check if updated answer works. — Prashant Shirke, Jun 30 '17 at 04:09
i really need to call it in a function because the data in list is from ajax so when i create a jquery function the last value of list is what i get — gray, Jun 30 '17 at 04:18
Check the updated answer. Check structure of HTML is matching to what your code is generating. Also UL should not contain another UL directly, it must wrapped within LI only. — Prashant Shirke, Jun 30 '17 at 06:44
I already solve my problem it seems that triggering click button will check all the check box. thanks for the help — gray, Jun 30 '17 at 06:45

score 0 · Answer 2 · answered Jun 30 '17 at 03:56

0

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

answered Jun 30 '17 at 03:56

Doan Tran

58
4

$("#LayerUL" + layergroupID + " li input[type='checkbox']").prop('checked', $("#LayerUL" + layergroupID + " li input[type='checkbox']").is(":checked")); can i code it like that – gray Jun 30 '17 at 03:59

score 0 · Answer 3 · answered Jun 30 '17 at 06:44

0

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

answered Jun 30 '17 at 06:44

gray

103
2
4
20

Checking all check box does not work on a created function

3 Answers3