问标记已更改的复选框的代码

EN

这个问题的tl:dr版本很简单。我有一组复选框，并希望将那些状态已更改为选中的复选框标记为未选中，将未选中状态标记为选中。下面是我解决这个问题的尝试。我们使用的不是jQuery，而是普通的JavaScript。

我有一个应用程序，它显示一个表，其中显示数据库中处于活动或非活动状态的项的列表。活动状态与复选框一起显示，如果项目处于活动状态，则选中该复选框；如果项目处于非活动状态，则取消选中该复选框。

然后，应用程序的用户将进行更改，取消选中复选框并选中未复选框以将项目的状态更改为他想要的状态，然后单击更新按钮将这些更改保存到数据库中。

我决定告诉用户他更改了哪些项目会很有帮助。

因此，我将每个复选框放在一个div中，该div运行一个函数，该函数将单元格背景更改为不同的颜色，以标记那些已更改的项。如果它们恰好点击复选框，颜色和检查状态都会按预期更改，但如果只在框外单击，但仍在表单元格内，颜色会更改，但检查状态不会更改。

因此，我在更改颜色功能中添加了一些代码，使其也可以切换复选框。如果他们在复选框外单击，但仍在单元格内单击，则效果很好。但是如果他们在复选框上单击右键，它会同时运行颜色更改功能，这会更改框的状态和颜色，然后单击复选框的默认状态也会更改。这会使检查状态返回到其原始状态。

问题是，我如何才能只运行其中的一个？有没有我不知道的标准方法呢？也许，我不应该使用复选框？

提前感谢

下面是函数：

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;
            }
    }

}