我的问题是,当我在选中一些复选框后单击按钮时,结果显示存在循环问题。最后一个复选框的 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]);
}
});
最佳答案
您在这里所做的是: 您将一个复选框元素附加到您的 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);
}
关于javascript - 如何获取在jquery中动态生成的选中复选框的id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44870539/