Ir para conteúdo
FabianoSouza

Estilizar TR que tenha checkbox marcado

Recommended Posts

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!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por helkton
      iai galera, tenho uma pendenga e não consigo achar nada pra suprir minha dúvida rsss
      seguinte....
       
      Tenho um cardápio Online onde tenho os devidos ITENS sendo abertos em uma janela modal e nesta janela tenho os devidos ITENS EXTRAS em um checkbox que o usuario clicam e adicionam
      esta é minha lista de ADICIONAIS EXTRAS QUE PEGO DO BANCO DE DADOS 
       
      <label style="border:0px red solid;font-size:1em;width:90%;text-align:left;padding:0px;margin-left:2em;" onclick="somar()"> <input style="height:23px;width:23px;cursor:pointer" type="checkbox" class='limited<?php echo $resultExtrasDelivery->idExtraDelivery?>' id="valorItemExtra" name="idExtraSelects[]" value="<?php echo $resultItensExtras->valorItemExtra?>" > <span style="cursor:pointer"><?php echo $resultItensExtras->nomeItemExtra?> <span style="font-size:0.7em;color:#DD2C00"> <small> <?php if($resultItensExtras->valorItemExtra == '0.00'){echo'';}else{echo '+R$ '.$resultItensExtras->valorItemExtra.'<input type="text" value="'.$resultItensExtras->valorItemExtra.'">';}?></small> </span> </span> </label> ela vem tipo assim
      AcréscimoTradicional - Escolha até 3 opções
      BACON 1,00
      CALABRESA 1,00
      MUSSARELA 1,00
      PRESUNTO 1,00
      OVO 1,00
       
      o que quero fazer é somente somar os itens clicados pelo usuario e somar com o TOTAL DO ITEM 
      tipo pegar o total do item tipo R$30,00 e ir somando com os acrescimos escolhidos
       
      <script> function somar() { // var valorItem = document.getElementById('valorItemExtra').value; var checkbox = document.getElementById('#valorItemExtra'); var total = 0; if(checkbox.checked == true){ total += checkbox.value; } document.getElementById('somar').innerHTML = total; } </script>  
    • Por Sapinn
      Salve! Não consigo verificar se o checkbox foi marcado, isso não faz o menor sentido porquê aparentemente eu fiz tudo certo.
       
      HTML:
       <div class="mt-4 mb-3 row ">                 <label class="label_checkbox">Adicionar customização                   <input type="checkbox" id="checkbox" name="custom_shirt">                   <span class="checkmark"></span>                 </label>               </div>  
      JAVASCRIPT:
       let checkedCustomize = document.getElementById("checkbox");  if(checkedCustomize.checked){     alert("Checkbox marcado");  }else{      console.log("checkbox não marcado");  }  
    • Por Caio Vargas
      Meus amigos estou com um problema que não consigo resolver as vezes e coisas simples mais não encaixa na minha cabeca eu tenho multiplos checkbox onde cada um tem o valor porem eu tô salvando isso em uma tabela única separado por vírgula não sei se isso e correto mais na hora de recuperar e colocar como checado não vai pq ele retorna os valores tudo jundo mesmo dando um explode não vai 
    • Por tony_lu
      Olá pessoal quero colocar um campo checkbox de aceito os termos de uso, mas não estou conseguindo validar este campo para enviar
      o form apenas se este campo por marcado podem me ajudar?
    • Por carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.