javascript - 如何获取在jquery中动态生成的选中复选框的id

Question

我的问题是，当我在选中一些复选框后单击按钮时，结果显示存在循环问题。最后一个复选框的 id 已被插入数组中。

我的 html 看起来像这样:

<h1>Batch Testing</h1>

<div id="batch_schedule_wraper"></div>
<input type="button" id="getCheckedBoxtBtn" value="Get Checked Ids" />

这是我的 JavaScript:

$(document).ready(function() {


  $('#getCheckedBoxtBtn').on('click', function() {

    var selected = [];

    $("div#batch_schedule_wraper input[type=checkbox]").each(function() {
      if ($(this).is(":checked")) {
        selected.push($(this).attr('id'));
      }
    });

    alert(selected);
  });

  var sortedIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  for (var i = 0; i < sortedIds.length; i++) {

    $("#batch_schedule_wraper").append("<div class='checkbox'>" +
      "<label class='block'>" +
      "<input name='form-field-checkbox' type='checkbox' class='ace input-lg remove_widget' id=''/>" +
      "<span class='lbl bigger-120'>Batch</span>" +
      " </label>" +
      "</div>"

      +
      "</div>");
    $("[name='form-field-checkbox']").attr("id", sortedIds[i]);

  }
});

Answer 1

您在这里所做的是:您将一个复选框元素附加到您的 div 中，然后为您的 div 中名称为“form-field-checkbox”的所有复选框设置 id。因此它为 div 内的所有复选框设置相同的 id。

因此，在循环结束时，所有复选框都将具有相同的 id:“10”。

您可以通过为当前元素设置 id 并将其附加到您的 div 中来解决此问题。

for (var i = 0; i < sortedIds.length; i++) {

    $("#batch_schedule_wraper").append("<div class='checkbox'>" +
      "<label class='block'>" +
      "<input name='form-field-checkbox' type='checkbox' class='ace input-lg remove_widget' id='" + sortedIds[i] + "'/>" +
      "<span class='lbl bigger-120'>Batch</span>" +
      " </label>" +
      "</div>" +
      "</div>");
  }

要在单个复选框上绑定(bind)事件，请执行以下操作

    for (var i = 0; i < sortedIds.length; i++) {

  var $checkDiv = $("<div class='checkbox'>" +
      "<label class='block'>" +
      "<input name='form-field-checkbox' type='checkbox' class='ace input-lg remove_widget' id='" + sortedIds[i] + "'/>" +
      "<span class='lbl bigger-120'>Batch</span>" +
      " </label>" +
      "</div>" +
      "</div>");

      $checkDiv.find("input").on("change", function(evt) {
            //do whatever you want
            //alert($(this).attr("id"));
      });

    $("#batch_schedule_wraper").append($checkDiv);
  }