Question

I am dynamically generating the checkboxes as follows:

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

say the names of the checkboxes generated are as follows: category1, category2, category3, category8, category10, category54, category55, category56, category, 59, category62, category132, category133.

Also, I have an array of 4 numbers: 2, 54, 8, 10….

I want to check the checkboxes having name attribute ending with these numbers in array. How shall I proceed?

Note: These are DYNAMICALLY GENERATED Checkboxes.

Answer 1

To check the checkboxes, all you need to do is add the checked attribute as described here.

Below is one solution. First, you want to store the Id instead of looking it up every time because it’s faster. Second, I used the $.inArray function to determine if the category is in the array that contains the numbers that should be checked. Finally, I used a ternary to add the checked attribute.

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

Alternatively you can just use another if statement.

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