Checkbox show/Hide button for generated lines

Question

I have an array of checkboxes generated and rows of tables that have the same class - class starts at 1 and increases in 1 as more elements are recovered.

Explanation Succinct: I need that when I click on the checkbox with class= 1,line('td') with class=1 (or class with matching value depending on the value of the checkbox class), appear on the screen for the user, both are already generated on the client side, but the line is property display:None in css, I need to overwrite this property, so when you click on the checkbox the line corresponding to it appears on the user screen.

Editing : PHP code that generates the elements for the client side Below:

 $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>";

Client-side generated Html code (small example):

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

Answer 1

There are many ways to do this.

My tip is to use an attribute data-target in checkboxes and do with this attribute always contain the id of the element that needs to be shown or hidden.

Also, make all checkboxes have a common class (toggle-check, in the example) to make it easier to assign the same event to all 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>

Answer 2

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


         

I created an example for Voce to disappear and appear as you click on the check https://jsfiddle.net/x1fkeqL3/