1

Preciso que ao clicar somente no checkbox pinte o background da tr e dos input.

No código abaixo ele pinta somente o background da tr e clicando em qualquer lugar da tr.

<html>
<head>
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <script>
    $(document).ready(function(){
      $('.table tr').click(function(){
        $trClass = $(this).attr('class');
        if ($trClass == undefined || $trClass == 'desclicado'){
          $(this).attr('class', 'clicado');
        } else {
          $(this).attr('class', 'desclicado');
        }
      });
    });
  </script>

  <style>
    .clicado{background: #000; color:#fff;}
    .desclicado{background: #fff; color: #000;}
  </style>

</head>
<body>
  <table class="table">
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="text"></td>
     <td><input type="checkbox"></td></tr>
  </table>
</body>
</html>

2 Respostas 2

2

Kevin fiz uma solução só com CSS ela não usa o "design" do input default do browser, mas as vezes te atende. Se tiver alguma dúvida me fala que posso te dar mais explicações de como funciona. Mas o principal aqui é manter o input fora da tabela para a regra do CSS funcionar, e o label vai fazer o papel do checkbox

label  {
    width: 12px;
    height: 12px;
    border: 1px solid;
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #fff;
    color: #000;
}
[type="checkbox"] {
    display: none;
}
#btn:checked + table label::after  {
    content: "✔";
    position: absolute;
    top: -5px;
    left: 0;
}
#btn:checked + table:not(label), #btn:checked + table input {
    background-color: #000;
    color: #fff;
}
<input id="btn" type="checkbox">
<table class="table">
    <tr>
        <td><input type="text">123</td>
        <td><input type="text">abc</td>
        <td><input type="text">123</td>
        <td><label for="btn"></label></td>
    </tr>
</table>

1

Com CSS consegues isso.

Quando o tr tiver a class clicado, o input vai pegar os estilos que forem definidos

<style>
  .clicado{background: #000; color:#fff;}
  .desclicado{background: #fff; color: #000;}
  /* o novo estilo */
  .clicado input { background: blanchedalmond; }
</style>

Edit Podes melhorar o teu Javascript também. Dá uma olhada em parents() e toggleClass()

<script>
$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    $checkbox = $(this);
    $tr = $(this).parents('tr');
    $tr.toggleClass("clicado", $checkbox.checked);
  });
});
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .