Hide and Show child element via checkbox

Asked

Viewed 541 times

2

I have an HTML structure of a <table> where I have a <tr> with two <td> with the following structure:

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

At first <td> i have a checkbox field, by the time I mark this checkbox I want to be able to show the next <td> of the same <tr> and if it is cleared I hide it. How could I do that?

I tested with jQuery didn’t work out so well.

javascript html

  • Where you’re hiding td?

  • I’m still not getting it.

  • Currently everything trims on the screen for the user.

3 answers

3


You need to hide the td with display: none and show/hide if the checkbox is checked or not checked:

$("#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>

If you want with pure JS, would be:

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>

  • Perfect guy! but so I have several data, to stay from a recursive or "auto", to any id that I have worked, because I did a simple check for a brands, but when there is more than one id in the database it breaks because I didn’t think of that possibility/

  • Could you leave variation_1 with auto-patch? Would you use a structure for ?

  • Change the selector to: $("input[id^='variation_']")

  • Um, thanks a lot guy. A question is more feasible to learn pure JS or Jquery for these types of interactions? \

  • 1

    jQuery makes it easier, but it’s always good to learn pure JS first. Learning pure JS will give you a better understanding of how jQuery works.

2

I believe what you need is this. First take the checkbox from inside the table, put before the table, so you can get everything that comes under this checkbox.

Ai you put a class in the TD you want to show and hide and use :checked to show or hide. To hide uses display:None and to show uses display:table-Cell, do not use display:block as this is a table!

.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

You can use, within the input, a onclick. Onclick is a command that is executed by clicking on something (such as Divs and inputs). you can use something like:

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

And then create a javascript function with the commands to hide

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


You just need to score with a <div id=""> the place you want to hide and ready

Browser other questions tagged javascript html

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