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

【问题标题】：How can I capture checkboxes that I'm creating programmatically?如何捕获以编程方式创建的复选框？
【发布时间】：2016-11-20 22:35:32
【问题描述】：

在下面的代码中，我从 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).");
    }
});

【问题讨论】：

标签： javascript jquery ajax sharepoint innerhtml

【解决方案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:

【讨论】：

我唯一的问题是复选框的数量可能会增长到无穷大（至少应用程序需要期待这种潜力）但我会接受这个建议！感谢您的回复。

【解决方案2】：

这部分 jQuery 返回 ul 中所有选中的输入框，类为 courseList：

jQuery('ul.courseList input:checked')

如果因为课程名称可能更改（您的复选框 ID 基于课程名称）而询问您的问题，我建议改用课程编号（或两者的适当组合）。

如果您想知道您的动态创建的复选框是否已被选中，并希望在提交表单之前通过 Javascript 执行此操作，则在您的复选框中添加一个类（例如 dynamicCourse）并通过 @ 查找选中的复选框987654325@.

此外，您的示例中的复选框没有设置value 属性。如果您将其提交到后端，您可能希望它具有一定的价值（从外观上看，课程编号是我的建议）。

【讨论】：