javascript - 检查动态生成的复选框

Question

我正在动态生成复选框，如下所示:

entries.each(function()
{
    if($(this).find('parentcategoryid').text() == 0)                
    {
        xmlArr += '<span><input type="checkbox" data-mini="true" name="category'+$(this).find('categoryid').text()+'" id="checkbox'+$(this).find('categoryid').text()+'" class="techAreasCheckBox" style="margin-top: 5px;"/><label class="techAreasLabel">'+$(this).find('categoryname').text()+'</label></span><br>'; 
    } 
    else
    {
        xmlArr;
    }                   
}); // Entries.Each function

假设生成的复选框名称如下:category1, category2, category3, category8, category10, category54, category55, category56, category, 59, category62, category132, category133。

另外，我有一个包含 4 个数字的数组:2、54、8、10....

我想检查名称属性以数组中的这些数字结尾的复选框。我该如何进行？

注意:这些是动态生成的复选框。

Answer 1

要选中复选框，您需要做的就是按照here 中的说明添加选中的属性。 .

下面是一种解决方案。首先，您想存储 Id 而不是每次都查找它，因为它更快。其次，我使用 $.inArray 函数来确定类别是否在包含应检查的数字的数组中。最后，我用了一个三元来添加checked属性。

var numberArray = [2, 54, 8, 10];

entries.each(function() {
     if($(this).find('parentcategoryid').text() == 0) {
          var categoryId = $(this).find('categoryid').text();
          var categoryInArray = $.inArray(categoryId, numberArray) !== -1;

          xmlArr += '<span><input type="checkbox" data-mini="true" name="category'+categoryId+'" id="checkbox'+categoryId+'" class="techAreasCheckBox" style="margin-top: 5px;"' + categoryInArray ? ' checked="checked" ' : '""/><label class="techAreasLabel">'+$(this).find('categoryname').text()+'</label></span><br/>'; 
     }
}); // Entries.Each function

或者，您可以只使用另一个 if 语句。

entries.each(function() {
     if($(this).find('parentcategoryid').text() == 0) {
          var categoryId = $(this).find('categoryid').text();
          var categoryInArray = $.inArray(categoryId, numberArray) !== -1;

          if(categoryInArray) {
          xmlArr += '<span><input type="checkbox" data-mini="true" name="category'+categoryId+'" id="checkbox'+categoryId+'" class="techAreasCheckBox" style="margin-top: 5px;" checked="checked"/><label class="techAreasLabel">'+$(this).find('categoryname').text()+'</label></span><br/>'; 
          } else {
          xmlArr += '<span><input type="checkbox" data-mini="true" name="category'+categoryId+'" id="checkbox'+categoryId+'" class="techAreasCheckBox" style="margin-top: 5px;"/><label class="techAreasLabel">'+$(this).find('categoryname').text()+'</label></span><br/>'; 
          }
     }
}); // Entries.Each function