Table row colour change on checkbox and when selected from MySQL

Question

I have a simple JavaScript that when a checkbox is selected then the row color changes. This works well.

However, when a user needs to edit their details they can see the boxes that they have checked (form the MySQL select) however the color has not changed, as the row color only changes when the user un-selects and then re-selects the checkboxes.

How can this be done?

Thanks

Below is the simple JavaScript

function ClickMakeColor(chk,ctrl)
{
    if(chk.checked)
    {
        document.getElementById(ctrl).className = 'CheckBoxOn';
    }
    else
    {
        document.getElementById(ctrl).className = 'CheckBoxOff';
    }
}

Answer 1

You can use toggle to toggle classes on/off. You didn't provide too much information such as html or what ctrl is, so there isn't much more info that can be given. If you update your question with that, I can give a better answer.

function ClickMakeColor(chk,ctrl) {
    let cl = document.getElementById(ctrl).classList
    cl.toggle('CheckBoxOn', chk.checked)
    cl.toggle('CheckBoxOff', !chk.checked)
}