标记已更改复选框的代码

Question

这个问题的 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;
            }
    }

}

Answer 1

我在 JS 框架中看到它们将用户未触及的控件标记为原始控件。因此，如果用户没有与复选框交互，它可能具有“原始”属性。当用户更改复选框的状态时，删除“原始”属性。

如果用户点击多次： 我会添加初始状态为“initial-checked”或“initial-unchecked”的属性，然后根据该属性将其重置回它。

Answer 2

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

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

然后你可以保存它并对改变的盒子做任何事情。

https://jsfiddle.net/hspveapu/