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();
      }
   });

It is, you're looking for a way to tell if a checkbox is checked in jQuery. — Zenoo, Jul 26 '18 at 13:54
It's not! Did you even read my question properly? I'm using the same function to check both checkbox and textbox. One is working and the other is partially working. Please check the pen before jumping your gun! — Jayonline, Jul 26 '18 at 13:57
The code you provided in the question doesn't include any textbox. Update your code to match your request. People shouldn't have to open an offsite page to answer. — Zenoo, Jul 26 '18 at 14:00
The first input is a textbox, granted it was an email field, but functions the same for this example. — Jayonline, Jul 26 '18 at 14:04

Zakaria Acharki · Accepted Answer · 2018-07-26T14:06:16.473

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>

edited Jul 26 '18 at 14:06

answered Jul 26 '18 at 13:52

Zakaria Acharki

66,747
15
75
101

Still no joy, Zakaria. – Jayonline Jul 26 '18 at 13:55
1

Updated my post @Jayonline – Zakaria Acharki Jul 26 '18 at 14:06
Thanks a lot @Zakaria!! That's what I was looking for, a generic method that works on both input types. Many thanks. – Jayonline Jul 26 '18 at 14:21
1

You're welcome brother... Congratulations, you've earned the **[Vote up privilege](https://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow)** consider to use it ;) – Zakaria Acharki Jul 26 '18 at 14:25
1

Cheers Zakaria! I sure will :D It's annoying when people down vote without even properly reading a question, guess they just want to feel superior :) Many thanks for your help with this one. – Jayonline Jul 26 '18 at 14:30
1

Glad I could help brother, Downvoters are everywhere, don't worry just ignore them and keep going... – Zakaria Acharki Jul 26 '18 at 14:32

Akilesh Kumar R · Answer 2 · 2018-07-26T14:37:08.570

Try this !

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

.container{ margin-top: 30px;}
.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>

Thanks a lot Akilesh - That solves my problem. Care to explain why $(this).is(':checked') didn't work? — Jayonline, Jul 26 '18 at 14:09
Actually, I just noticed that you've hard-coded the input text id, which I want to avoid as I have multiple textboxes? Once I use a generic format $(this).val it didn't work. :( — Jayonline, Jul 26 '18 at 14:19
@Jayonline Now, i separate the conditional statements for dynamic is it fix now ! — Akilesh Kumar R, Jul 26 '18 at 14:38

Toggling visibility using same function on checkbox and text box

2 Answers2