title: How to access values of cells within a row of a table which has been checked by a checkbox in Javascript?
body: <p>I was wondering if anyone could help me with getting this working. </p>
  
  <p>I'm using HTML to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus.</p>
  
  <p>I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B].</p>
  
  <p>My code for Javascript function and html table are below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function calculate(textID) {
    var table = document.getElementById('course'); //id of table
    var rowCount = table.rows.length;
    var array = []; //array to hold the values
    var c = 0;
  
    dmenus = document.getElementByTagName("select"); //get the drop down menus
  
    for (var a = 1; a &lt; rowCount; i++) { //a = 1 as the 1st row contains column headings
      var row = table.rows[a];
      var check = row.cells[0].childNodes[0];
      if (null != check &amp;&amp; true == check.checked) {
        for (var b = 0; b &lt; dmenus.length; b++) {
          val = dmenus[b].options[dmenus[b].selectedIndex].value;
          array[c] = val; //set index of array to equal value of dropdown box
          c++;
        }
      } else {
        b++;
      }
    }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="course"&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')" /&gt;&lt;/td&gt;
      &lt;th style="color:white"&gt;Course Title&lt;/th&gt;
      &lt;th style="color:white"&gt;Credits&lt;/th&gt;
      &lt;th style="color:white"&gt;Grade&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="checkbox" name="tick" id="tick" /&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" /&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;select name="credits" id="credits"&gt;
                      &lt;option...&lt;/select&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;select name="grade" id="grade"&gt;
                      &lt;option...&lt;/td&gt;
   &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support JQuery so Javascript code will be most appreciated. </p>