Javascript 用于标记已更改复选框的代码

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

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

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

我决定向用户指出他更改了哪些项目会有帮助

因此，我将每个复选框放在一个div中，该div运行一个函数，该函数将单元格背景更改为不同的颜色，以标记那些与原来的颜色不同的项目。如果他们右击复选框，则颜色和检查状态都会按预期更改，但如果您仅在框外但仍在表格单元格内单击，则颜色会更改，但检查状态不会更改

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

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

提前谢谢

功能如下：

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

}

---

我在JS框架中看到的是，它们将用户未触及的控件标记为原始控件。所以，若用户并没有和复选框交互，那个么它可能具有“原始”属性。当用户更改复选框的状态时，删除“原始”属性

如果用户多次单击：

---

我会添加初始状态为“初始选中”或“初始未选中”的属性，然后根据该属性将其重置回该属性。

我不确定您到底想做什么，但如果您想跟踪更改的复选框，可以这样做：

for(var i = 0; i < checkboxes.length; i++){
    checkboxes[i].addEventListener("mousedown", function(){
    console.log(this.checked);
  });
}

for（变量i=0；i

然后您可以保存它并对更改的框执行任何操作

---

您可以改为静态指示初始值；不是动态的，但涉及较少的编码。因此，您建议添加另一个状态为（活动/非活动）的列，然后选中复选框进行更改？我可以看出这在功能上是如何工作的，但我认为这对用户来说可能不够直观。例如，我有一个单选按钮表，其中所有最初选中的按钮都有深蓝色背景，可点击的按钮有浅蓝色，不可点击的按钮有红色。这可能会有所帮助，但我看到的问题是，如果用户将其更改，然后将其更改回原始状态，该怎么办。不再是原始的，但仍然和原来一样。用我的想法更新了答案。因此，我可以用：创建复选框，并根据“初始选中”的值是否与状态不同来更改颜色？好的，这对我来说很有效。我必须做一些研究，找出所有自定义属性都需要以“data-*”开头，因此属性需要是“datainitialstate='checked'”。我还没有对所有浏览器进行验证，只是我公司支持的狭义版本。这似乎没有解决问题的背景点击方面。