如何捕获以编程方式创建的复选框？

Question

在下面的代码中，我从SharePoint (基本上是一个excel电子表格)中提取数据并显示在我的页面上。使用.innerHTML将复选框推送到我的页面，并以编程方式为其指定ID。

我的问题是:如何确定这些复选框是否被选中(因为每次加载应用程序时它们都可能不同)？

(一旦我知道检查了什么，我将根据检查在下一个页面上显示更多的元数据-我已经弄清楚了这一部分)

$.ajax({
url: "myWebsite",
type: "GET",
headers: { "ACCEPT": "application/json;odata=verbose" },
success: function(data){
    $.each(data.d.results, function(index) { 
    var $this = $(this);
    var courseName = $this.attr('Title'); 
    var courseNumber = $this.attr('Course_x0020_Number'); 
    var courseUrl = $this.attr('URL'); 
    var trainingGroup = $this.attr('Training_x0020_Group'); 
    var recurrence = $this.attr('Recurrence'); 

        if (trainingGroup == 'Group1') {
            if (recurrence == "Don't Specify") {recurrence = '';
            } else recurrence = " ("+recurrence+")"; 
            document.getElementById('officeListSpan').innerHTML += '<ul class="courseLists"><li><input type="checkbox" id="'+courseName.replace(/\s+/g, '')+'"/>'+courseName+recurrence+'</li></ul>';
        }
        if (trainingGroup == 'Group2') {
            if (recurrence == "Don't Specify") {recurrence = '';
            } else recurrence = " ("+recurrence+")"; 
            document.getElementById('labListSpan').innerHTML += '<ul class="courseLists"><li><input type="checkbox" id="'+courseName.replace(/\s+/g, '')+'"/>'+courseName+recurrence+'</li></ul>';
        }
    });
    },
    error:  function(){
    alert("Failed to query SharePoint list data. Please refresh (F5).");
    }
});

Answer 1

您需要一种方法来了解已创建了多少个复选框。当创建复选框时，它们的id必须有一个通用的名称和一个数字，例如id="checkbox0"，id="checkbox1等等，然后在html代码的某些部分中编写大量的复选框，并将其放入一些hidden标签。然后，在读取复选框数据时，读取复选框的数量并执行for

function getCheckboxes(){ var ammount = parseInt(document.getElementById("checkBoxesAmmount")); var checkbox; for(var i = 0; i<ammount; i++){ checkbox = document.getElementById("checkbox"+i); //do staff } return;

我希望这对你有用c：

Answer 2

这段jQuery返回类为courseList的ul中的所有选中的输入框

jQuery('ul.courseList input:checked')

如果提出您的问题是因为课程名称可能会更改(您的复选框If基于课程名称)，我建议您改为使用课程编号(或两者的适当组合)。

如果您想知道动态创建的复选框是否已选中，并希望在提交表单之前通过Javascript执行此操作，则可以向您的复选框添加一个类(比如dynamicCourse)，并通过jQuery('input.dynamicCourse:checked')查找get the checked复选框。

此外，示例中的复选框没有设置value属性。如果你正在向后端提交它，你可能希望它有一些价值(从它的外观来看，课程编号是我的建议)。