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”的属性，然后根据该属性将其重置为它。

Answer 2

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

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

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

https://jsfiddle.net/hspveapu/

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

2 个答案: