Javascript select elements

Question

How can I select all of the check boxes from a table column by knowing the column index?

LE: This needs to be addressed in plain javascript, not jquery

Answer 1

Use the nth child selector! http://api.jquery.com/nth-child-selector/

Answer 2

Assuming no colspans or rowspans, then you can do it fairly simply with jQuery:

$('#mytable tr td:nth-child('+index+') input[type="checkbox"]');

@Dustin Laine added a good point: The nth-child index starts at 1, not 0.

Answer 3

If you're going to do this in plain javascript, I would recommend adding a class name to each checkbox to associate it with a table column. So your table would look something like this:

<table id="mytable">
        <tr>
                <td><input type="checkbox" class="column-1" name="a"></td>
                <td><input type="checkbox" class="column-2" name="b"></td>
                <td><input type="checkbox" class="column-3" name="c"></td>
        <tr>
        <tr>
                <td><input type="checkbox" class="column-1" name="d"></td>
                <td><input type="checkbox" class="column-2" name="e"></td>
                <td><input type="checkbox" class="column-3" name="f"></td>
        <tr>
        <tr>
                <td><input type="checkbox" class="column-1" name="g"></td>
                <td><input type="checkbox" class="column-2" name="h"></td>
                <td><input type="checkbox" class="column-3" name="i"></td>
        <tr>
</table>

Then you could select all the check boxes in a column like this:

document.getElementsByClassName('column-'+index)

Answer 4

The easiest way to do this is to, as Ben Lee recommended, set an id attribute which you can find easily on the table element itself. You can then use the following to find your table:

var myTable = document.getElementById("<idattributevalue>");

Now we have to iterate through all of the rows with the column index in question (we'll call it 'myIndex'), we now have a function we can use to find all your checkboxes:

function findMyCheckboxes(myTable, myIndex) {

  var myCheckboxes = [];
  var cell = null;
  var allInputs = null;

  var myRows = myTable.rows;

  for (var i = 0; i < myRows.length; i++) {
    // Get the cell for each row at the index we know
    cell = myRows[i].cells[myIndex];
    // Get all input tags in that cell
    allInputs = cell.getElementsByTagName("input");
    // Only pick the inputs which are checkboxes
    for (var j = 0; j < allInputs.length; j++) {
      if (allInputs[j].type == "checkbox") {
        myCheckboxes.push(allInputs[j]);
      }
    }
  }

  return(myCheckboxes);

}

This code, of course, probably has some syntax errors. Feel free to point them out.

Answer 5

Something simple like this might work, depending on your table structure.

var colIndex = 1; // 0-based
var table = document.getElementById('mytable');
var numRows = table.getElementsByTagName('tr').length;
for (var i=0; i<numRows; i++)
{
var box = table.getElementsByTagName('tr')[i].getElementsByTagName('td')[colIndex].getElementsByTagName("input")[0];
box.setAttribute("checked", "true"); 
}