Hide Show Div Based On Tick Box

Question

I have a div that hides and shows based on a button click. This works perfectly but I'd like to be able to do this based on a check box being ticked or not.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </head> 
  <body>
    <div id="box" class="box">
      <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
        <tbody>
          <tr>
            <td>test text</td>
            <td>1</td>
          </tr>
          <tr>
            <td>in dummy</td>
            <td>2</td>
          </tr>
          <tr>
            <td>table</td>
            <td>3</td>
          </tr>
        </tbody>
      </table>    
    </div>
    <button>TOGGLE VISIBILITY</button>
    <input type="checkbox" id="2" name="display" value="Y">
    <script>
      try {
        var box = $('#box');
    
        $('button').on('click', function() {
          if (box.hasClass('hidden')) {
             box.removeClass('hidden');
             setTimeout(function() {
               box.removeClass('visuallyhidden');
             }, 20);
          } else {
             box.addClass('visuallyhidden');
             box.one('transitionend', function(e) {
               box.addClass('hidden');
             });
          }
        });
      } catch (error) {
         throw error;
      }
    </script>
  </body>
</html>

This example looks at the button but I'd like it to reference the status of the checkbox

Your button does not seem to do anything in given example above. I think you forgot to add the related CSS classes. — Barrosy, Apr 26 '19 at 13:28
This might be what you are looking for https://stackoverflow.com/questions/3442322/jquery-checkbox-event-handling — Ricky Stefano, Apr 26 '19 at 13:39

score 0 · Answer 1 · answered Apr 26 '19 at 13:40

 $(document).ready(function(){




$("#mycheckbox").on( "click", function(){
            if($(this).prop("checked")){
                $(".box").show();
            }else{
                $(".box").hide();
            }
        } );

    });

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
  <div id="box" class="box">
    <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
      <tbody>
        <tr>
          <td>test text</td>
          <td>1</td>
        </tr>
        <tr>
          <td>in dummy</td>
          <td>2</td>
        </tr>
        <tr>
          <td>table</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>

  </div>
  <button>TOGGLE VISIBILITY</button>
  <input type="checkbox" id="mycheckbox" name="display" value="Y">
  <script type="text/javascript">
   
  </script>
</body>

</html>

Try with this code hope this is what your asking for

Thank you but I already had a version of it working like that. The key difference I wanted to keep though was the transition rather than just hide / show — Sparx, Apr 26 '19 at 13:51

Barrosy · Answer 2 · 2019-04-26T14:50:54.357

You could add an event listener to your checkbox on click and determine whether it has been checked or not (plain javascript):

//Grab box
let box = document.getElementById("box");
// Add event listener to checkbox
let checkbox = document.getElementById("2");
checkbox.addEventListener("click", function() {
  // Get the checkbox
  var checkBox = document.getElementById("2");
  if (checkBox.checked == true) {
    //When checked:
    box.classList.remove("hidden");

    //Add whatever code you require:

    /*
    if (box.hasClass('hidden')) {
      box.removeClass('hidden');
      setTimeout(function() {
        box.removeClass('visuallyhidden');
      }, 20);
    } else {
      box.addClass('visuallyhidden');
      box.one('transitionend', function(e) {
        box.addClass('hidden');
      });*/


  } else {
    //When unchecked:
    box.classList.add("hidden");
  }
});

.box {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="box" class="box">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    <tbody>
      <tr>
        <td>test text</td>
        <td>1</td>
      </tr>
      <tr>
        <td>in dummy</td>
        <td>2</td>
      </tr>
      <tr>
        <td>table</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

</div>
<button>TOGGLE VISIBILITY</button>
<input type="checkbox" id="2" name="display" value="Y">

This will allow for a delegated event (so dynamically added checkboxes with the same pre-requisites will inherit the same event).

Or you could do this by using jQuery:

//Bind event listener to the checkbox:
$("body").on("click", "input[type=checkbox]#2", function() {
  //When the checkbox has been checked
  if ($(this).prop("checked")) {
    //Added slow to give an example how to add a transition using jQuery only
    $(".box").show("slow");
  }
  //When the checkbox has been unchecked:
  else {
    $(".box").hide("slow");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="box" class="box">
  <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
    <tbody>
      <tr>
        <td>test text</td>
        <td>1</td>
      </tr>
      <tr>
        <td>in dummy</td>
        <td>2</td>
      </tr>
      <tr>
        <td>table</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

</div>
<button>TOGGLE VISIBILITY</button>
<input type="checkbox" id="2" name="display" value="Y">

Thank you but I already had a version of it simply doing a hide / show. The key difference I wanted to keep though was the transition effect rather than just hide / show — Sparx, Apr 26 '19 at 13:52
You did not mention anything about transition other than the not working code you provided. See my edit for a quick example @user1879185 — Barrosy, Apr 26 '19 at 14:00
I added a more advanced transition to the basic javascript version of the two scripts. @user1879185 — Barrosy, Apr 26 '19 at 14:49

Hide Show Div Based On Tick Box

2 Answers2