Estilizar TR que tenha checkbox marcado

[FabianoSouza 5]

Galera...faz um tempão que busco uma maneira de estilizar uma TR, caso seu respectivo checbox seja clicado.

Será mesmo que não tem como fazer isso apenas com CSS (sem precisar fazer em javascript)??

 

Repito. Preciso de algo ultra simples: clicou no checkbox, aplica cor na TR em que estiver esse checkbox.

Sei que o javascript é para essas questões de comportamento.

 Mas penso que possa existir uma maneira,  explorando o estado "checked" do input. Será que não??

 

Estou testando variações dessa ideia... mas ainda sem sucesso :-(

table tbody tr td:nth-child(1) input[type="checkbox"]:checked ~ table > tbody > tr {
  /* aplica cor...*/
  {

Estou usando td:nth-child(1) porque o checkbox fica na primeira TD de cada TR ;-)

 

Obrigado!

 

[Sherlock02 0]

Olá,

Assim fica um pouco complicado. Seria possível você colocar o código da tabela em questão? E o css?

[FabianoSouza 5]

Olá @Sherlock02

 

Segue o código

 

https://jsfiddle.net/c0v93fxu/

[Sherlock02 0]

Olá,

 A boa notícia é que dá para fazer, mas a ruim, é que não com css hehe

 

Eu encontrei soluções semelhantes:

(Não sei se pelas regras do forum pode ser colocado links externos aqui, mas enfim)

https://pt.stackoverflow.com/questions/246777/css-ao-clicar-em-um-checkbox-pintar-uma-td

E essa também:

https://codepen.io/diegobdev/pen/vGoqKW

Abraços!

[FabianoSouza 5]

Blz, @Sherlock02... queria saber se é possível fugir do JS para uma coisa tão simples assim...

Pelo que percebi não tem jeito heheheh

Também pesquisei muito e não encontrei usando só o CSS.

 

 

Obrigado pela sua atenção ao meu problema. Vou ter que usar JS mesmo...

[Omar~ 87]

Também não consegui só com css acho que não dar mesmo.

Que seja JS então:

<table width="200" border="1">
    <tr>
        <td>&nbsp;</td>
        <td><input class="marcar" type="checkbox" /></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td><input class="marcar" type="checkbox" /></td>
    </tr>
</table>

<script>
    var item = document.querySelectorAll('.marcar');
    item.forEach(evento);

    function evento(e) {
        e.addEventListener('change', colocarCor, false);
    }

    function colocarCor(e) {
        var cor = 'red';
        var definirCor = e.target.parentNode.parentNode;
        // parentNode [1] <td>
        // parentNode [2] <tr>
        if (e.target.checked) {
            definirCor.setAttribute('style', 'background-color:' + cor);
        } else {
            definirCor.removeAttribute('style');
        }
    }
</script>

 

[FabianoSouza 5]

Olá @Omar~!
Muito obrigado.
Está funcionado direitinho aqui https://jsfiddle.net/0m43vdqx/.

Valew mesmo!