Checkbox show/Hide button for generated lines

Asked

Viewed 174 times

-1

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>

javascript jquery html css

  • Young man, we need to see how the code is organized and not a layout image.

  • OK, I’ve put the server-side code

  • 1

    Not from the server, man. Just an example of what your TD and Checkboxes structure looks like. Your problem is super simple, but without a [mcve] it is impossible to write a good answer.

  • The structure is generated in PHP itself. Edited Question.

  • Note that while is once run at an increment in the id of both input checkbox and table td.

  • 1

    Young man, create a small example, a [mcve]. You don’t need to put your original code, just as it is at the end.

  • Write a small HTML of how the generated code looks.

  • A small example of the generated code has been added

  • It has two elements with same id? This is completely wrong, id must be unique.

  • i know.. I tried to do a gambiarra that did not go anything right, I believe that the generated value should be added to a class for both

  • But why don’t you use class? Or a data-*?

  • I needed that when I clicked on the checkbox, the line corresponding to it would appear, since it is something generated based on the database of my system

  • I tried to create a "relationship of the id of both" but has no sense I admit, now I’m running out of time to deliver this to my boss

  • Look, young man. If you spend about 10 minutes to describe in detail your problem, make a complete and executable example and show how the table is, I’m sure I can help you. If you don’t do this it will take a huge effort to be able to help (so far there have been 7 comments).

  • What is missing for understanding the problem?

  • describe in detail your problem, make a complete and executable example and show how the table is

  • The "small example" is ok, it just needs to be executable... You can’t understand if each line will be an item or if it is a pro checkbox line and a pro item...

  • Young man, I left you an answer. See if you’ll answer

Show 13 more comments

2 answers

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>

  • Thank you very much ! was exactly what I needed, I found dps that another way that I had done worked.. only that in the project jquery was a outdated version and did not work..

  • Just to complement. Since I was using Ajax to asymptotically generate the information on the screen, jquery did not recognize the generated class, so I changed the ** $('. toggle-check'). on('change', Function() *? by ** $(Document). on('change', '.toggle-check', Function()**

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 created an example for Voce to disappear and appear as you click on the check https://jsfiddle.net/x1fkeqL3/

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.