jquery - 选中所有复选框不适用于创建的函数

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>

所以我有这个从数据库中获取列表的代码。该列表有这样的父母和孩子：

这是列表

当我单击底图检查框时，底图下方的所有复选框都将被选中

当我像下面的代码一样创建一个 jquery 函数时，它可以工作。所有复选框都被选中。

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

但是当我尝试创建这样的函数时：

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

我得到了所有参数，唯一的问题是复选框不起作用。

我需要一个函数，因为我从 ajax 的数据中传递了一个参数。当我在 ajax 中创建 jquery 函数时，我得到的参数来自最后一项。

提前致谢

更新

这就是我调用函数的方式

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

第二次编辑

有一个 ajax 函数将填充 ulLa​​yers

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

这是将填充 LayerUL 的第二个 ajax 函数

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

在函数 chkAll() 中，您不能使用 $(this)

Answer 2

我已经找到了一个简单的解决方案，可以检查复选框。

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

触发它将检查复选框并将触发事件问题解决。

不管怎么说，还是要谢谢你

Answer 3

由于 HTML 不可用，下面是通用代码，它将事件附加到任何 id 开头的复选框，chk-layer并且在事件处理程序中，相同的文本已被替换以获取层 id。

更改您的代码，如下所示。

$(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); 
   }); 
});

此外，如果您选择了同一个 ul 中的所有复选框并且想要检查该 ul 的所有复选框，那么您可以尝试通过添加类来选择所有复选框，如下所示。

$(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>