Toggling visibility using same function on checkbox and text box

Question

I have one function to show and hide elements based on the input. When a checkbox checked or any text is entered into a text box, a specific message box is displayed. When the checkbox is unchecked or if there's no text in the text box the message should disappear. I managed to implement the functionality for text box and also the checkbox function as far as to show the message but not toggling. Can someone help me figure out why the message does not get hidden when the checkbox is unchecked, please?

Many thanks.

Pen - https://codepen.io/anon/pen/yqoRrQ

HTML

<div class="container">
  <div class="form-group checkWrap">
    <label for="exampleInputEmail1">Email address</label>
    <input type="text" class="form-control checkToggle" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
</div>

CSS

.elHidden{ display: none;}

JS

   $('.checkToggle').on('change keyup', function () {
      if ($(this).is(':checked') || $(this).val()) {
        $(this).parents('.checkWrap').children('.elHidden').show();
      }
      else {
        $(this).parents('.checkWrap').children('.elHidden').hide();
      }
   });

Answer 1

You could use .is() to check the type of the current element, and to check if the checkbox is checked or not, like :

$('.checkToggle').on('change input', function() {
  var condition;
  var message = $(this).closest('.checkWrap').find('.alert');

  if ($(this).is(':checkbox')) {
    condition = $(this).is(':checked');
  } else {
    condition = $(this).val();
  }

  condition ? message.removeClass('elHidden') : message.addClass('elHidden');
});

.elHidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="form-group checkWrap">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control checkToggle" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck2">
    <label class="form-check-label" for="exampleCheck2">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>

  <div class="form-group form-check checkWrap">
    <input type="checkbox" class="form-check-input checkToggle" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>

    <div class="elHidden alert alert-success">
      This is some stuff
    </div>
  </div>
</div>