Code to mark checkboxes that have changed

The tl:dr version of this question is simple. I have a set of checkboxes and want to mark those that have changed state checked to unchecked, unchecked to checked. Below is my attempt to solve this. We are not using jQuery just vanilla JavaScript.

I have an application that displays a table that shows a list of items from the DB that are either active or inactive. The active status is displayed with a checkbox that is checked if the item is active and unchecked if it is inactive.

A user of the application will then make changes, unchecking checked boxes and checking unchecked boxes to change the status of the items to what he wants and then hit an update button to save those changes to the DB.

I decided that it would be helpful to indicate to the user which items he had changed.

So, I then placed each check box inside of a div that runs a function that changes the cell background to a different color to mark those items that have changed from what they originally were. That was fine if they hit right on the checkbox, both the color and the check status change as expected, but if you click just outside the box, but still inside the table cell, the color changes but not the check status.

So, I added some code to the change color function to make it also switch the checkbox. This worked well if they click outside the checkbox, but still inside the cell. But if they click right on the checkbox it runs both the color change function, that changes both the box status and the color, and then the default status change for clicking a checkbox. This causes the check status to go back to its original status.

The question is, how do can I get only one or the other to run? Is there a standard way to do this I am unaware of? Maybe, I should not use a checkbox?

thanks in advance

Below is the function :

function toggleCheckboxBackground(clickedItem){
    if(clickedItem.style.background == 'red'){
        clickedItem.style.background = '';
    } else {
        clickedItem.style.background = 'red';
    }
    var cboxes = clickedItem.getElementsByTagName('input');
    if(cboxes[0].type === 'checkbox'){
        if(cboxes[0].checked){
            cboxes[0].checked = false;
        }
        else {
            cboxes[0].checked = true;
            }
    }

}