Question

What I need to do is check to see if the checkbox is checked, and if so, select all the radio buttons located within the same element?

I’ve set up the elements with id’s, b/c that is the “physical” grouping of the elements that will be affecting each other.

I’m trying to do something like this onchange(‘some_row_id’):

function select_row(row_id) {
  // Get 1st td element (where checkbox is located) and assign its
  // checked value to variable "checked"
  var checked = document.getElementById(row_id).td[0].input.checked;

  if(checked) {
    var children = document.getElementById(row_id).childNodes;
    for(var i = 0; i< children.length; i++) {
      if(children.td.type == radio) {
        children.td.radio = checked;
      }
    }
  }
}

I know that javascript is almost 200% wrong, but I can’t figure out how to properly select only td children (or prefereably, only input grandchildren) of a tr element and check them.

Here’s the basic form structure in actual working html:

<form name="form2" action="testfile4.php" method="get">
<table border="1"><thead>
    <tr><th>Select entire row</th><th>item_code</th><th>description</th><th>page</th>
      </tr>
</thead>
<tbody>
    <tr id="534">
        <td ><input type="checkbox" onchange="select_row(534);"></td>       <td>15038         <input type="radio" name="15819-038|item_code" value="534" /></td>
        <td>For 1st item,  alternate 1
        <input type="radio" name="15819-038|description" value="534" /></td>
        <td>5
          <input type="radio" name="15819-038|page" value="534" /></td>
      </tr>
    <tr id="535">
        <td ><input type="checkbox" onchange="select_row(535);"></td>       <td>15038         <input type="radio" name="15819-038|item_code" value="535" /></td>
        <td>For 1st item, alternate 2         <input type="radio" name="15819-038|description" value="535" /></td>
        <td>5
          <input type="radio" name="15819-038|page" value="535" /></td>
      </tr>
    </tbody>
    </table>
    </form>

EDIT:
I’m willing to accept jquery solutions. Thank you.

EDIT 2:
Thanks to nnnnnn. I used your JS and added this to have the uncheck behavior I wanted. If you want you can update your answer with it and I’ll remove it from here:

 else if (!row.cells[0].childNodes[0].checked) {
        inputs = row.getElementsByTagName("input");
        for(var i=0; i<inputs.length; i++) {
            if(inputs[i].type === "radio") {
                inputs[i].checked = false;
            }
        }
    }

Answer 1

Well here’s one way to do it:

function select_row(row_id) {
   // get a reference to the row based on the id passed in
   var row = document.getElementById(row_id),
       inputs;

   // .cells[0] gives the row's first td element,
   // then .childNodes[0] gives that td's first child element which
   // will be the checkbox
   if (row.cells[0].childNodes[0].checked) {
      // getElementsByTagName gives all descendent elements with the matching
      // tag, not just direct children, so get all the inputs for the current
      // row and loop through them looking for the radios
      inputs = row.getElementsByTagName("input");
      for (var i=0; i<inputs.length; i++) {
         if (inputs[i].type==="radio")
             inputs[i].checked = true;
      }
   }
}

And change your checkbox to use onclick=... instead of onchange=....

Note that using checkboxes to select a row doesn’t really make sense because after selecting one, if you click another row’s checkbox the first row’s checkbox is still checked. You might be better off with a button or <a> element for this purpose.

Note also that instead of passing the row ID to the function and then getting a reference to that row using the ID, like this:

<input type="checkbox" onclick="select_row(534)">

function select_row(row_id) {
   var row = document.getElementById(row_id);
   // etc

You can directly pass a reference to the checkbox that was clicked and use that instead:

<input type="checkbox" onclick="select_row(this);">

function select_row(cb) {
   var row = cb.parentNode.parentNode;
   if (cb.checked) {
      // etc

However in my full solution above I stuck with passing the ID like you did in case you are calling the function from somewhere other than just the click event.

There were several things wrong with your code as posted:

• You can’t get children of a particular element just by refering to their type, e.g., getElementById(row_id).td[0].input doesn’t work. To get the first td you can use a row’s cells collection and say .cells[0] (like in my code).

• Your for loop doesn’t use the i variable within the loop to select the individual items. You should’ve said children[i] within the loop.

• Your if statement: if(children.td.type = radio) { is doing an assignment (single = sign) instead of a comparison (double == or triple === equals sign), and should be comparing to the string "radio" (with quotes).