Как изменить цвет фона, когда кто-то снимает флажок

Question

Чтобы выделить строку, мой код:

function highlight_row(row_id)
{
    var row = document.getElementById(row_id);
    row.style.background = "yellow"; // background yellow
}

Мой код HTML:

<tr id="row_{{ forloop.counter }}"><td>{{ word.n }}</td><td style="padding:0;"><a href="/search/?q={{ word.word }}" style="padding:5px;display:block;color:blue;">{{ word.word }}</a></td><td style="text-align:center"><input type="checkbox" name="checkbox_{{ word.id }}" onclick="highlight_row('row_{{ forloop.counter }}')" /></td></tr>

Как отключить выделение строки, когда пользователь снимает флажок для этой строки

Answer 1

Добавьте 'this' к вызывающей функции:

<td style="text-align:center">
 <input type="checkbox" 
        name="checkbox_{{ word.id }}" 
        onclick="highlight_row('row_{{ forloop.counter }}',this)" />
</td>

Теперь вы можете использовать проверенное состояние чечбокса, чтобы определить, что делать:

function highlight_row(row_id,checkbox)
{
    var row = document.getElementById(row_id);
    row.style.background = checkbox.checked ? "yellow" : ""; 
}

Answer 2

Вы имеете в виду, как это?

function highlight_row(row_id)
{
  var row = document.getElementById(row_id);
  if (row.style.background !== "yellow") {
  row.style.background = "yellow";
  }
  else {
  row.style.background = "white";
  }
}

Answer 3

function highlight_row(row_id)
{

  if (!highlight_row.toggleColor) highlight_row.toggleColor = 0;
  var row = document.getElementById(row_id);
  row.style.background = (highlight_row.toggleColor%2==0) ? "yellow" : ''; // put alternate color in ''
  highlight_row.toggleColor++;
}