-1

Tenho um array de checkboxes gerados e linhas de tabelas que possuem mesma class — class começa em 1 e vai incrementando em 1 na medida que vão sendo recuperados mais elementos.

Explicação Sucinta: Preciso que quando clique no checkbox com class= 1,a linha('td') com class=1 (ou class com valor correspodente dependendo do valor da class do checkbox), apareça na tela para o usuario, ambos ja estão gerados no lado do cliente, porem a linha está com propriedade display:none no css, preciso sobrescrever essa propriedade, para quando clicar no checkbox a linha correspondente a ele apareça na tela do usuário.

Edição : Codigo PHP que gera os elementos para o lado do cliente Abaixo:

 $valorCheck =1;
 $result="SELECT * FROM indicador  WHERE nome LIKE '%$id%' ORDER BY nome";
 $resultado = mysqli_query($dbc,$result);
 echo "<br/>";
 echo "<table id=\"resultadoPesquisa\" class='table table-responsive' align='center'>
  ";
  while($row_indicador = mysqli_fetch_assoc($resultado)) {
  echo "<tr>";
  echo ("<td>" . $row_indicador['nome'] . "</td>");
  echo "<td>";
  echo "<div>";
  echo("<input  class=\"checkbox1 $valorCheck\"  name='check[]' type='checkbox'          id='' value='" . $row_indicador['nome'] ."'/>");
  echo("<span></span>");
  echo "</div>";
  echo "</td>";
  echo "</tr>";
  echo "<tr>";
  echo ("<td  id='' class='definicaoIndPesquisa $valorCheck'>");
  echo("<h7>". $row_indicador['desc_ind'] ."</h7><br/>");
  echo("<h5>Equaçao : ". $row_indicador['equacao'] ."</h5><br/>");
  echo ("</td>");
  echo "</tr>";
  $valorCheck ++;
  }
  echo "</table>";

Codigo Html gerado no lado do cliente (pequeno exemplo):

.definicaoIndPesquisa{
display:none;
}
     <tr>
          <td>Carne bovina de corte</td>
          <td>
            <div><input class="checkbox1 1" name="check[]" id="" value="Carne   bovina  de corte" type="checkbox"><span></span></div>
          </td>
     </tr>

     <tr>
          <td id="" class="definicaoIndPesquisa 1">
            <h7>Indicador para testes</h7> <br>
            <h5>Equaçao : Custo Operacional Efetivo*Custos Fixos</h5>
            <br>
          </td>
     </tr>

     <tr>
      <td>Bovino (kg*Pa)</td>
      <td>
        <div><input class="checkbox1 2" name="check[]" id="" value="Carne   bovina  de corte" type="checkbox"><span></span></div>
      </td>
    </tr>

    <tr>
      <td id="" class="definicaoIndPesquisa 2">
        <h7>Indicador teste</h7> <br>
        <h5>Equaçao :  2*Custos Fixos</h5>
        <br>
      </td>
    </tr>

18
  • Jovem, precisamos ver como está organizado o código e não uma imagem do layout.
    – Jéf Bueno
    6/11/2017 às 12:16
  • ok, ja coloco o codigo do lado do servidor 6/11/2017 às 12:21
  • 1
    Não do servidor, cara. Só um exemplo de como está a sua estrutura de TD's e CheckBoxes. Seu problema é super simples, mas sem um Exemplo Mínimo, Completo e Verificável é impossível escrever uma resposta boa.
    – Jéf Bueno
    6/11/2017 às 12:22
  • A estrutura é gerada no próprio PHP. Pergunta Editada. 6/11/2017 às 12:25
  • 1
    Jovem, crie um pequeno exemplo, um Exemplo Mínimo, Completo e Verificável. Não precisa colocar seu código original, somente como fica no final.
    – Jéf Bueno
    6/11/2017 às 12:28

2 Respostas 2

1

Tem várias formas de se fazer isso.

Minha dica é usar um atributo data-target nos checkboxes e fazer com este atributo contenha sempre o id do elemento que precisa ser mostrado ou escondido.

Além disso, faça com que todos os checkboxes tenham uma classe em comum (toggle-check, no exemplo) para que seja mais fácil atribuir o mesmo evento para todos os checkboxes.

$('.toggle-check').on('change', function() {
  const target = $(this).data('target'); 
  // (^) target recebe o valor de data-target do elemento que disparou o evento
  $(`#${target}`).toggle();
  // (^) o método toggle() mostra/esconde o elemento
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Carne bovina de corte</td>
      <td>
        <div>
          <input class="toggle-check" data-target="1" name="check[]" value="Carne bovina  de corte" type="checkbox">           </div>
      </td>
    </tr>
    <tr>
      <td id="1">
        <h7>Indicador para testes</h7> <br>
        <h5>Equaçao : Custo Operacional Efetivo*Custos Fixos</h5>
        <br>
      </td>
    </tr>
    <tr>
      <td>Bovino (kg*Pa)</td>
      <td>
        <div><input class="toggle-check" data-target="2" name="check[]" value="Carne   bovina  de corte" type="checkbox"></div>
      </td>
    </tr>
    <tr>
      <td id="2">
        <h7>Indicador teste</h7> <br>
        <h5>Equaçao :  2*Custos Fixos</h5>
        <br>
      </td>
    </tr>
  </tbody>
<table>

2
  • Muito obrigado ! era exatamente isso que precisava, descobri dps que outra forma que tinha feito funcionava.. so que no projeto o jquery era uma versão defasada e não funcionava.. 7/11/2017 às 11:22
  • So para complementar..Como eu estava usando Ajax para gerar assincronamente as informações na tela, o jquery não reconhecia a class gerada, por isso mudei o ** $('.toggle-check').on('change', function() ** por ** $(document).on('change', '.toggle-check', function()** 7/11/2017 às 13:19
0

 <tr>
    <td>Carne bovina de corte</td>
         <td><div><input class="checkbox1" name="check[]" id="1" value="Carne   bovina  de corte" type="checkbox"><span></span></div></td>
     </tr>
         <tr> 
         <td id="1" class="definicaoIndPesquisa">
         <h7>Indicador para testes</h7>      <br>
         <h5>Equaçao : Custo Operacional Efetivo*Custos Fixos</h5>
         <br>
         </td>
         </tr>


         

Criei um exemplo para voce para sumir e aparecer conforme clicar no check https://jsfiddle.net/x1fkeqL3/

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 .