Jump to content

checkbox changing class on click


freelance84

Recommended Posts

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?

Link to comment
https://forums.phpfreaks.com/topic/216574-checkbox-changing-class-on-click/
Share on other sites

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');"/>

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.