javascript - 标记已更改的复选框的代码

Question

这个问题的 tl:dr 版本很简单。我有一组复选框，想将那些已更改状态的复选框标记为未选中，未选中到已选中。下面是我试图解决这个问题。我们不使用 jQuery，只使用 vanilla 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 框架中看到的是，它们将用户未触及的控件标记为原始控件。因此，如果用户没有与复选框进行交互，它可能具有“原始”属性。当用户更改复选框的状态时，删除“pristine”属性。

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