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中附加一个复选框元素，然后为名称为＆＃34; form-field-checkbox＆＃34;的所有复选框设置id。在你的div里面。因此它为div中的所有复选框设置了相同的id。

因此，在循环结束时，所有复选框都将具有相同的ID：＆＃34; 10＆＃34;。

您可以通过为当前元素设置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>");
  }

要在单个复选框上绑定事件，请执行此操作

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

Answer 2

因为您使用了此代码$("[name='form-field-checkbox']").attr("id", sortedIds[i]);，因为相同的名称属性，它将为所有复选框设置相同的ID。请尝试以下代码

$(document).ready(function() {
  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='"+ sortedIds[i] +"'/>" +
      "<span class='lbl bigger-120'>Batch</span>" +
      " </label>" +
      "</div>"
      +
      "</div>");

  }

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

    var selected = [];

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

    console.log(selected);
  });  
});

Answer 3

当您动态创建复选框时，您在执行此操作时将所有已创建元素的id属性设置为相同的值：$("[name='form-field-checkbox']").attr("id", sortedIds[i]);

相反，您可以像这样在循环中设置id：

// ...
"<input name='form-field-checkbox' type='checkbox' class='ace input-lg remove_widget' id='"+ sortedIds[i] +"'/>" +
//...

此外，您可以简化获取所选复选框ID的查询：

var selected = $("div#batch_schedule_wraper input[type=checkbox]:checked").map(function () {
    return $(this).attr("id");
})

Answer 4

问题实际上在于您分配ID的代码。您在每个迭代中使用$("[name='form-field-checkbox']").attr("id", sortedIds[i]);并且您已经使用的选择器基本上将{em> 所有与{{1}的DOM元素作为目标}。因此，您每次都会为所有匹配的元素分配相同的ID，并且最后分配的ID（在您的情况下为10）仍然分配给所有匹配元素。

以下代码段应该有助于解决您的问题。我在创建元素时附加了id。

＆＃13;

[name='form-field-checkbox']

＆＃13;

$(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='" + sortedIds[i] + "'/>" +
      "<span class='lbl bigger-120'>Batch</span>" +
      " </label>" +
      "</div>"

      +
      "</div>");

  }
});

＆＃13;

Answer 5

对于动态生成的元素，您可以按类获取元素，而不是ID，因为id对于每个dom元素应该是唯一的。例如$('.your_class_name')。在这里，我为每个复选框添加一个类'checkboxClass'并迭代复选框。

＆＃13;

  $(document).ready(function(){
   $('#getCheckedBoxtBtn').on('click',function(){
       var selected = [];
       $('.checkboxClass').each(function(){
          if($(this).is(':checked')){
	      selected.push($(this).prop('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 checkboxClass' id='"+sortedIds[i]+"'/>"
		+"<span class='lbl bigger-120'>Batch</span>"
		+" </label>"+"</div>"+"</div>");                         
	}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="batch_schedule_wraper"></div>
<input type="button" id="getCheckedBoxtBtn" value="Get Checked Ids"/>

＆＃13;

如何获取在jquery中动态生成的已选中复选框的ID

5 个答案: