2

Tenho uma estrutura HTML de uma <table> onde eu tenho um <tr> com duas <td> com a seguinte estrutura:

<tr>
    <td class="w-25 text-nowrap">
         <label><input class="form-check-input" type="checkbox" name="Lindy-125 (Azul)" id="variation_1">Lindy-125 (Azul)</label>
    </td>
    <td>
        <div class="form-check-inline">
             <div class="mr-3">
                 <label> <input class="form-check-input ml" type="checkbox" name="Centro de Caucaia" id="store_1"> Centro de Caucaia</label>
              </div>
              <div class="mr-3">
                    <label> <input class="form-check-input ml" type="checkbox" name="Sul de Caucaia" id="store_2"> Sul de Caucaia</label>
              </div>
        </div>
    </td>
 </tr>

Na primeira <td> eu tenho um campo checkbox, no momento que eu marcar esse checkbox eu quero poder mostrar o próximo <td> dessa mesma <tr> e se caso for desmarcado eu esconda ele. Como eu poderia fazer isso?

Testei com jQuery não deu muito certo.

3
  • Onde vc está escondendo a td?
    – Sam
    Commented 26/03/2019 às 14:02
  • Ainda não estou conseguindo. Commented 26/03/2019 às 14:03
  • Atualmente tudo aparace na tela para o usuário. Commented 26/03/2019 às 14:04

3 Respostas 3

3

Você precisa esconder a td com display: none e mostrar/esconder se o checkbox for checado ou deschecado:

$("#variation_1").on("change", function(){
   $(this)
   .closest("td")
   .next()
   [this.checked ? "show" : "hide"]()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr>
       <td class="w-25 text-nowrap">
            <label><input class="form-check-input" type="checkbox" name="Lindy-125 (Azul)" id="variation_1">Lindy-125 (Azul)</label>
       </td>
       <td style="display: none;">
           <div class="form-check-inline">
                <div class="mr-3">
                    <label> <input class="form-check-input ml" type="checkbox" name="Centro de Caucaia" id="store_1"> Centro de Caucaia</label>
                 </div>
                 <div class="mr-3">
                       <label> <input class="form-check-input ml" type="checkbox" name="Sul de Caucaia" id="store_2"> Sul de Caucaia</label>
                 </div>
           </div>
       </td>
    </tr>
</table>

Se quiser com JS puro, ficaria:

document.getElementById("variation_1").onchange = function(){
   var td = this.parentNode.parentNode.nextElementSibling;
   td.style.display = this.checked ? "table-cell" : "none";
}
<table>
   <tr>
       <td class="w-25 text-nowrap">
            <label><input class="form-check-input" type="checkbox" name="Lindy-125 (Azul)" id="variation_1">Lindy-125 (Azul)</label>
       </td>
       <td style="display: none;">
           <div class="form-check-inline">
                <div class="mr-3">
                    <label> <input class="form-check-input ml" type="checkbox" name="Centro de Caucaia" id="store_1"> Centro de Caucaia</label>
                 </div>
                 <div class="mr-3">
                       <label> <input class="form-check-input ml" type="checkbox" name="Sul de Caucaia" id="store_2"> Sul de Caucaia</label>
                 </div>
           </div>
       </td>
    </tr>
</table>

5
  • Perfeito cara!, mas assim eu tenho varios dados, para ficar de uma recursiva ou "auto", para qualquer id que eu tiver funcionar, porque fiz uma simples para um check de marcas, mas quando tem mais de um id no banco ele quebra porque eu não pensei nessa possibilidade/ Commented 26/03/2019 às 14:17
  • Poderia deixar o variation_1 com autocremento? Usaria um estrutura for ? Commented 26/03/2019 às 14:19
  • Mude o seletor para: $("input[id^='variation_']")
    – Sam
    Commented 26/03/2019 às 14:22
  • Hum, valeu mesmo cara. Uma pergunta é mais viavel aprender JS puro ou Jquery para esses tipos de interações? \ Commented 26/03/2019 às 14:22
  • 1
    O jQuery torna mais fácil, mas é sempre bom aprender JS puro primeiro. Aprendendo JS puro vc vai entender melhor como funciona o jQuery.
    – Sam
    Commented 26/03/2019 às 14:24
2

Acredito que o que vc precisa é isso. Primeiro tire o checkbox de dentro da tabela, coloque antes da tabela, dessa forma vc consegue pegar tudo que vier abaixo desse checkbox.

Ai vc coloca uma classe na TD que quer mostrar e esconder e usa o :checked para mostrar ou esconder. Para esconder usa display:none e para mostra usa display:table-cell, não use display:block pois aqui se trata de uma tabela!

.opt {
  display: none;
}
#variation_1:checked + table .opt {
  display: table-cell;
}
label {
  cursor:pointer;
}
<link rel="stylesheet" type="text/css" media="screen"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
  <div class="row">
<div class="col-12">
  <input class="form-check-input" type="checkbox" name="Lindy-125 (Azul)" id="variation_1">
  <table>
    <tr>
      <td class="w-25 text-nowrap">
        <label for="variation_1">Lindy-125 (Azul)</label>
      </td>
      <td class="opt">
        <div class="form-check-inline">
          <div class="mr-3">
            <label> <input class="form-check-input ml" type="checkbox" name="Centro de Caucaia" id="store_1"> Centro de
              Caucaia</label>
          </div>
          <div class="mr-3">
            <label> <input class="form-check-input ml" type="checkbox" name="Sul de Caucaia" id="store_2"> Sul de
              Caucaia</label>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
  </div>
</div>

1

Você pode usar, dentro do input, um onclick. Onclick é um comando que é executado ao clicar em algo(como divs e inputs). você pode usar algo como:

   <div id="item1">
   <input class="form-check-input ml" type="checkbox" name="Centro de Caucaia" id="store_1" onclick:"funcao_esconder();">
   </div>

E então criar uma função em javascript com os comandos para esconder

 function
 var x = document.getElementById("item1"); 
 if (x.style.display === "none") 
 {
    x.style.display = "block";
 } else 
 {
     x.style.display = "none";
 }


Você só precisa marcar com um <div id=""> o local que quer esconder e prontinho

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 .