Toggling visibility using same function on checkbox and text box [duplicate]

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
– Zenoo, Commented Jul 26, 2018 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
– Jayonline, Commented Jul 26, 2018 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
– Zenoo, Commented Jul 26, 2018 at 14:00
The first input is a textbox, granted it was an email field, but functions the same for this example. — Jayonline
– Jayonline, Commented Jul 26, 2018 at 14:04

Zakaria Acharki · Accepted Answer · 2018-07-26 14:06:16Z

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>

You're welcome brother... Congratulations, you've earned the Vote up privilege consider to use it ;)
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.
Glad I could help brother, Downvoters are everywhere, don't worry just ignore them and keep going...

Akilesh Kumar R · Accepted Answer · 2018-07-26 14:37:08Z

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?
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 Now, i separate the conditional statements for dynamic is it fix now !

Collectives™ on Stack Overflow

Toggling visibility using same function on checkbox and text box [duplicate]

2 Answers 2

6 Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Linked

Related