Answers on Stackoverflow: como colorir uma td que tenha um checkbox checked

Compartilhe nas redes sociais

E ae galera tudo bem?

Este é meu primeiro post no blog e quero iniciar com uma série sobre ajudas que dou no stackoverflow.

Resumidamente a dúvida que o amigo tinha era sobre como fazer que uma td de uma tabela ficasse com fundo colorido quando um checkbox que está dentro dessa célula estivesse checked.

Inicialmente pensei um pouco para ver se daria para fazer com css puro. Para isso teríamos que ter um seletor que permitisse que determinado elemento fosse estilizado caso algum filho seu atendesse determinada regra.

Algo parecido com isso:

td:has(checkbox:checked) {
  background: #fff;
}

Seria muito bom não é mesmo?! Mas embora ainda não seja possível, em breve teremos esse recurso. O MDN nos dá mais informações a respeito.

Bom, já que css puro pra este caso estaria descartado pensei em como fazer usando uma pequena ajuda do javascript e cheguei à seguinte solução:

var $table = document.querySelector('.minha-table');

$table.addEventListener("click", function(ev){
  if (ev.target.tagName == "INPUT") {
    if (ev.target.checked) {
      ev.target.parentNode.parentNode.classList.add("selected");
    }else {
      ev.target.parentNode.parentNode.classList.remove("selected");
    }
  }
});

Usando o conceito de Event Delegation, o código acima adiciona um EventListener à tabela. Então toda vez que o evento click acontecer, verificamos se o ‘alvo’ (target) do click eh um input e se ele está checked. Se estiver, adicionamos uma classe selected ao elemento td pai do checkbox. Do contrário removemos a classe da td.

Com isso, tudo que resta é estilizar o elemento que tiver a classe selected:

table td {
  padding: 5px;
  background: #ccc;
}

td.selected {
  background: #f00;
}

Nosso html de exemplo foi este abaixo:

<table class="minha-table">
  <tbody>
    <tr>
      <td>teste</td>
      <td>teste</td>
      <td>teste</td>
    </tr>
  </tbody>
</table>

E foi assim que cheguei nessa solução.

Caso queira ver funcionando, acesse aqui no codepen este mesmo código, porém funcional.

Vale ressaltar que tirar um tempinho para ajudar pessoas iniciantes (ou nem tão iniciantes) que estejam com duvidas é muito legal. Fora que muitas vezes isso acaba nos fazendo adquirir novos conhecimentos.

Por enquanto é isso!

Até mais.