title: Dynamic HTML table with Javascript checkboxes puzzle - how to access checkbox.checked from outside of the function?
body: <p>Before I begin, I should mention I am using Javascript but I'm not using JQuery.</p>
  
  <p>I have a function which obtains data from a site and displays it in an HTML table.</p>
  
  <p>I would like to add a checkbox to each row, and find if each one has been checked or not later (i.e. when a button is clicked), outside of the function that creates the table.</p>
  
  <p>The reason for this is that the function that makes the table only runs once and can't check if the box is checked or not (the user hasn't had a chance to check any yet!).</p>
  
  <p>Each checkbox relates to other data displayed on the same row, which I can access outside of <code>_cb_findItemsAdvanced(root)</code> by declaring the 'items' variable before the function begins. However, I can't seem to do this for checkboxes.</p>
  
  <p>I can add normal checkboxes to the table with:</p>
  
  <pre><code>"&lt;input type=checkbox...". 
  </code></pre>
  
  <p>However, I can't seem to access them from outside of the function that makes the table (and calls for the data). I've tried:</p>
  
  <p>document.form1.sharedCheckboxName</p>
  
  <p>It didn't seem to work.</p>
  
  <p>I have tried everything, from creating a global checkbox array and trying to specify </p>
  
  <pre><code>" + checkbox[i] + " 
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>"&lt;input type=checkbox...",
  </code></pre>
  
  <p>but it didn't work. I know my current code has just specified a variable of type checkbox, rather than what I want which is to populate the table with my existing, global, array of checkboxes.</p>
  
  <p>Any help would be greatly appreciated, as I am lost! I hope you're not, after reading that! :-)</p>
  
  <p>Here is my code:</p>
  
  <pre><code>var items;
  var checkbox = [];
  function _cb_findItemsAdvanced(root)
  {
      items = root.findItemsAdvancedResponse[0].searchResult[0].item || [];
  
      var html = [];
      html.push('&lt;table width="100%" border="0" cellspacing="0" cellpadding="3"&gt;&lt;form name="form1"&gt;&lt;tbody&gt;');
  
  
  for (var i = 0; i &lt; items.length; ++i)  
  {
      var item     = items[i];
      var title    = item.title;
      var pic      = item.galleryURL;
      var viewitem = item.viewItemURL;
      checkbox[i] = document.createElement('input');
      checkbox[i].type = "checkbox";
      checkbox[i].name = "name";
      checkbox[i].value = "value";
      checkbox[i].id = "id" + i;
      if (null != title &amp;&amp; null != viewitem)
      {
        html.push('&lt;tr&gt;&lt;td&gt;' + '&lt;img src="' + pic + '" border="0"&gt;' + '&lt;/td&gt;' +
          '&lt;td&gt;&lt;a href="' + viewitem + '" target="_blank"&gt;' + title + '&lt;/a&gt;&lt;/td&gt;' + '&lt;td&gt; &lt;input type = "' + checkbox[i].type + '" + &lt;/t&gt;&lt;/tr&gt;');
      }
  
  }   
  
  
  
  html.push('&lt;/tbody&gt;&lt;/table&gt;');
  document.getElementById("results").innerHTML = html.join("");
  
  }
  
  if (checkbox[0].checked)
  {
       alert("HI"); //but nothing happens
  }
  </code></pre>