Change table row with radio button

JavaScript
1

Hi,

Just wondering if anyone has a script that will change a table row with a radio button being checked.

I can do this with checkboxes, but my page needs to be with radio buttons.

I also need the table row to revert back to the original color once the radio button is deselected. The radio buttons are in a group and all have the same name.

Thanks in advance if anyone can help.

Jamie

2

Show us your code with checkboxes and someone here would probably be nice enough to convert it for you.

3

you just mean y ou want to highlight the current row that is selected correct? I have a script that does this using checkboxes as well. I simply changed input type="textbox to input type=“radio” and the the selected row would change color, however it did have a problem in that when i selected another box it didnt change back the original color. This could be solved easily though (i didnt bother though because the script is in use). Like Kravvitz said though, we would need to see your code so we can use it… otherwise we would just be guessing how you have it currently set up.

4

Hi,

Here is the code i use for checkboxes. mwolfe you are right, i need the row to go back to the previous colour once another radio button is selected.


<html>
<head>
<title>Checkbox Highlight Rows Example</title>
<script language="JavaScript" type="text/javascript">
<!--
function toggle(box,theId)
{
    if (document.getElementById) {
        var row = document.getElementById(theId);
        if (box.checked) {
            row.className = "on";
        } else {
            row.className = "off";
        }
    }
}
// -->
</script>
<style type="text/css">
<!--
.off {
background-color: #ffffff;
}
.on {
background-color: #ccff99;
}
-->
</style>
</head>

<body>
<table border="0" cellpadding="2" cellspacing="4">
  <tr id="row1">
    <td><input type="checkbox" name="box1" id="box1" value="" onClick="toggle(this,'row1')"><label for="box1">Tick the box and the row will change!</label></td>
  </tr>
  <tr id="row2">
    <td><input type="checkbox" name="box2" id="box2" value="" onClick="toggle(this,'row2')"><label for="box2">Tick the box and the row will change!</label></td>
  </tr>
</table>
</body>
</html>
5

Anyone have a solution for this one?

6

Swap Table Row Classes with Radio Buttons