Как я могу проверить, установлен ли следующий флажок?

Question

Я пытаюсь выяснить, установлен ли следующий флажок в событии onclick или нет. Если установлен следующий флажок, я хочу, чтобы цвет фона был белым. На рисунке 1 показан желтый фон для неотмеченной строки и белый фон для отмеченной строки. На рисунке 2 показано, когда я проверяю желтую строку, следующая строка меняется на желтую, я хочу, чтобы она оставалась белой, если она уже отмечена.

Есть ли следующая функция, которую я могу использовать? Вот код, который у меня есть:

$('input[id="chkRow"]').on('change', (function () {
            if (this.checked) {
                $(this).closest('tr').css("background-color", "white");
                $(this).closest('tr').next('tr').css("background-color", "yellow");
            }
            else {
                $(this).closest('tr').css("background-color", "yellow");
                $(this).closest('tr').next('tr').css("background-color", "white");
            }
        }));

Answer 1

Получить индекс текущего TD и использовать его, чтобы найти соответствующую ячейку в следующей строке, а затем проверить, установлен ли флажок.

$('input[id="chkRow"]').on('change', function() {
  var curRow = $(this).closest("tr");
  var nextRow = curRow.next("tr");
  if (this.checked) {
    curRow.css("background-color", "white");
    var thisColumn = $(this).closest("td").index();
    if (nextRow.children("td").eq(thisColumn).find(":checkbox").is(":checked")) {
      nextRow.css("background-color", "white");
    } else {
      nextRow.css("background-color", "yellow");
    }
  } else {
    curRow.css("background-color", "yellow");
    nextRow.css("background-color", "white");
  }
});