checkbox changing class on click

[freelance84]

There is a section in my site in which ticking or unticking a checkbox in the first cell in a <tr> determines if the info is to be used when recieved by the recieving .php.

 

I am now trying to spice up the site a little. One thing i am trying to do is: When the user un ticks a checkbox, this triggers a js function which is to change the class of the said row. (the changed class basically makes the row look greyed out).

 

Only thing is it isn't working yet. I got the js from 2 different sources: here and here

 

Here is my attempt at creating the changing class JS

//changing the class depending on checkbox status
function classChangeTickBox1(formID,tickID,trID)
{
	var tr = document.getElementById(trID);

	if(document.formID.tickID.checked == 1)
		{
			tr.setAttribute("class", "matrix_tr1");
			tr.setAttribute("className", "matrix_tr1");
			return;
		}
	else
		{
			tr.setAttribute("class", "matrix_tr_greyed");
			tr.setAttribute("className", "matrix_tr_greyed");
			return;
		}
}

And here is the html (generated by heredocs from php) trying to call the js function along with the table  (i know the css all works fine so there is no need to post that)

<tr id="$tr_id" class="blue">
<td>
<form name="form" action="test.php" method="post">
<input type="checkbox" checked="checked" id="$cb_id" name="$cb_id"  onclick="classChangeTickBox1('form','$cb_id','$tr_id');"/>
</form>
</td>
<td>This starts out life as a blue row</td>
</tr>

 

Any ideas where its failing?

[freelance84]

I've just tried implementing a different JS approach from here, but to no avail

 

//changing the class depending on checkbox status
function classChangeTickBox1(tickID,trID)
    {
    
        if(document.getElementById(tickID).checked == 1)
            {
                //adding a class
                document.getElementById(trID).className += " matrix_tr1";
                //removing class
                document.getElementById(trID).className = document.getElementById(trID).className.replace(/\bmatrix_tr_greyed\b/','')
            }
        else
            {
                //adding a class
                document.getElementById(trID).className += " matrix_tr_greyed";
                //removing class
                document.getElementById(trID).className = document.getElementById(trID).className.replace(/\bmatrix_tr1\b/','')
            }
    }

 

The html now reads

<input type="checkbox" checked="checked" id="$cb_id" name="$cb_id" onclick="classChangeTickBox1('$cb_id','$tr_id');"/>

 

[freelance84]

Finally found a simple, working example  :

 

http://www.webmasterworld.com/forum91/3125.htm