我有一个应用程序,允许用户选择一个或多个课程。用户可以选择保存所选择的课程并稍后返回以完成该过程。当/如果用户返回时,我重新创建复选框列表。然后,我尝试找到该div中的所有输入复选框。我将它记录到控制台,它返回一个空集合。如何获取复选框属性?
使用复选框填充的空div。
<div class="courseList applyBackgroundColor" id="UserCheckList">
</div>
我在做帖子并使用结果创建动态文本框。
var createCourse = function(studentID)
{
var StudentCourseList = '<table><tbody>';
do post here
$.each(result, function (index, item) {
StudentCourseList += '<td valign="top" style="width:1%" id=td.ck.' +
item.ID + '><div class=""><input type="checkbox" class="checkbox"
id="'+ item.ID + '" value="' + item.ID + '" /></div></td>
<td valign="top" style="width:30%;padding:.25em;" id="' + item.ID +
'"><span id="span.' + item.ID + '" title="' + item.Description + '">'
+ item.Description +'</span></td>';
}
$('#UserCheckList').html(StudentCourseList );
}
检查网页加载时是否有学生ID。
$(function(){
var studentID = $('#studentID').val();
if(studentID !==''){
createCourse(studentID);
var listCheckUsers = $('.courseList').find('input[type=checkbox]');
console.log(listCheckUsers);
如果我在listCheckUsers旁边放置一个断点并对其进行调试,则控制台中显示的结果如下所示:
Object[input#MAC201.checkbox attribute value = "MATH 201",
input#ENC101.checkbox attribute value = "ENGLISH 101",....]
}
没有断点,我看到一个空对象
Object[]
});
已更新:添加确切的JQuery消息。
//This is shown when I do not use a breakpoint.
1. jQuery.fn.init[0]
1. context: document
2. length: 0
3. prevObject: jQuery.fn.init[1]
1. 0: div#UserCheckList.Display
2. context: document
3. length: 1
4. selector: "#UserCheckList"
5. __proto__: jQuery[0]
4. selector: "#UserCheckList input[type=checkbox]"
5. __proto__: jQuery[0]
答案 0 :(得分:1)
您在表格元素中缺少className courseList
。
更新 我使用setTimeout模拟了Ajax请求。您可以删除setTimeout代码并将Ajax请求放在适当的位置。返回数据时,使用数据运行回调函数。
function getResults(studentID, callback) {
// Async call.
setTimeout(function() {
// Replace generator with Ajax call
var result = [];
for (var i = 0; i < 10; i++) {
var item = {
ID: i,
"Description": "Result #" + i
};
result.push(item);
}
// Run this when data returns.
callback(result);
}, 3000);
// Show loading while we wait.
$('.UserCheckList').html('loading...');
}
function showResults(result) {
var StudentCourseList = '<table class="courseList"><tbody>';
$.each(result, function(index, item) {
StudentCourseList += '<tr><td valign="top" style="width:1%" id=td.ck.' +
item.ID + '><div class=""><input type="checkbox" class="checkbox"\
id="' + item.ID + '" value="' + item.ID + '" /></div></td>\
<td valign="top" style="width:30%;padding:.25em;" id="' + item.ID +
'"><span id="span.' + item.ID + '" title="' + item.Description + '">' + item.Description + '</span></td></tr>';
});
$('.UserCheckList').html(StudentCourseList);
}
$(function() {
var studentID = $('#studentID').val();
if (studentID !== '') {
getResults(studentID, function(results) {
// callback when results are complete.
showResults(results);
var listCheckUsers = $('.courseList').find('input[type=checkbox]');
console.log(listCheckUsers);
});
}
}); //end
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="UserCheckList"></div>
&#13;