Код для отметки галочек, которые изменили

Question

Версия этого вопроса прост. У меня есть набор флажков и вы хотите отметить те, которые изменили состояние, отмеченное на флажок, отмеченный флажком, отмеченный флажком. Ниже моя попытка решить эту проблему. Мы не используем jQuery только ванильный JavaScript.

У меня есть приложение, которое отображает таблицу, которая отображает список элементов из активной или неактивной БД. Активное состояние отображается с флажком, который проверяется, если элемент активен и не установлен, если он неактивен.

Пользователь приложения затем вносит изменения, снимая флажки и проверяя необработанные поля, чтобы изменить статус элементов на то, что он хочет, а затем нажмите кнопку обновления, чтобы сохранить эти изменения в БД.

Я решил, что было бы полезно указать пользователю, какие предметы он изменил.

Итак, я поместил каждый флажок внутри 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/