Checkbox show / hide button for generated lines

Question

Checkbox show / hide button for generated lines

Navigation

#1 by (1 votes)
#2 by (0 votes)

-1

I have an array of generated checkboxes and table rows that have the same class-class starts at 1 and increments by 1 as more elements are retrieved.

Succinct explanation: I need when I click on the checkbox with class = 1 , the line ('td') with class = 1 or class with corresponding value depending on the value of the checkbox class), it appears on the screen for the user, both are already generated on the client side, however the line is property display: none in css, I need Overwrite this property, so when you click on the checkbox the line corresponding to it appears on the user's 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>";

Html code generated on the client side (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>

javascript html jquery css

asked by anonymous 06.11.2017 / 13:14

2 answers

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>

I've created an example for you to disappear and appear as you click on the check link

06.11.2017 / 13:49

How to display query result in a JtextArea within a JtextArea Bootstrap responsive examples please

score 1 · Accepted Answer

There are several ways you can do this.

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

In addition, 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>Carnebovinadecorte</td><td><div><inputclass="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>