CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Bhawna
Bhawna

Reputation: 705

Show and hide div on check and uncheck of checkbox

I want to hide and show div on check and uncheck of checkbox. I am getting the parent and finding the div which I want to hide. But code is not running

Jquery is:

$('.show-check').click(function() {
    if (this.checked) {    
        $(this).parent().find('.div-check').fadeIn('slow');
    } else
        $(this).parent().find('.div-check').fadeOut('slow');
});

HTML:

<div class="type-details">
  <span class="form-label">Logo:</span>
  <div class="switch">
    <label>
      <input type="checkbox" class="show-check" checked>
      <span class="lever"></span>
    </label>
  </div>
  <div class="landing-inputfile div-check">
    <div class="col-xs-12 no-padding">
      <div class="input-group">
        <input type="text" class="file-input" placeholder="No file" readonly>
        <label class="input-group-btn">
          <span class="btn btn-default btn-flat btn-basic2">
             UPLOAD <input type="file" style="display: none;">
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 2130

Answers (6)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Use this script instead

$('.show-check').click(function() {
  if ($(this).prop('checked')) {
    $(this).parents('.type-details').find('.div-check').fadeIn('slow');
  } else
    $(this).parents('.type-details').find('.div-check').fadeOut('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
  <span class="form-label">Logo:</span>
  <div class="switch">
    <label>
      <input type="checkbox" class="show-check" checked>
      <span class="lever"></span>
    </label>
  </div>
  <div class="landing-inputfile div-check">
    <div class="col-xs-12 no-padding">
      <div class="input-group">
        <input type="text" class="file-input" placeholder="No file" readonly>
        <label class="input-group-btn">
          <span class="btn btn-default btn-flat btn-basic2">
            UPLOAD <input type="file" style="display: none;">
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Pratik Deshmukh
Pratik Deshmukh

Reputation: 308

Try this code : 

$('.show-check').click(function() {
    $(this).toggleClass('checked unchecked');
    if ($(this).hasClass('checked')) {
        $(this).parents('.type-details').find('.div-check').fadeIn('slow');
    } else {
        $(this).parents('.type-details').find('.div-check').fadeOut('slow');
    }
});

 <input type="checkbox" class="show-check checked" checked>

Upvotes: 0

Bilal Iqbal
Bilal Iqbal

Reputation: 315

$('.show-check').click(function() {
    if ($(this).is(":checked")) {

        $(this).closest('.type-details').find('.div-check').fadeIn('slow');
    } else
        $(this).closest('.type-details').find('.div-check').fadeOut('slow');
});

Upvotes: 0

Jayesh Chitroda
Jayesh Chitroda

Reputation: 5049

Use $(this).closest(".type-details").find('.div-check') to get the div-check div and hide/show it.

$('.show-check').click(function() {
    if (this.checked) {
        $(this).closest(".type-details").find('.div-check').fadeIn('slow');
    } else {
        $(this).closest(".type-details").find('.div-check').fadeOut('slow');
      }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="type-details">
  <span class="form-label">Logo:</span>
  <div class="switch">
    <label>
      <input type="checkbox" class="show-check" checked>
      <span class="lever"></span>
    </label>
  </div>
  <div class="landing-inputfile div-check">
    <div class="col-xs-12 no-padding">
      <div class="input-group">
        <input type="text" class="file-input" placeholder="No file" readonly>
        <label class="input-group-btn">
          <span class="btn btn-default btn-flat btn-basic2">
            UPLOAD <input type="file" style="display: none;">
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

Why your code does not work :

$(this).parent() will give you label - and find('.div-check') won't return anything.

Use closest() - to get a common parent which has the desired child element,

$(this).closest('.type-details').find('.div-check').fadeIn('slow');

Also, I'd suggest you use change() event instead of click() on checkbox in the below,

$('.show-check').click(function() {

Upvotes: 5

pleinx
pleinx

Reputation: 626

Use $('input').is(':checked')

In your example: $(this).is(':checked')

You have to use parents() to select the correct wrapper to find your element div-check

var $check = $(this).parents('.type-details').find('.div-check');
$('.show-check').click(function() {
   if ($(this).is(':checked')) {
       $check.fadeIn('slow');
   } else
       $check.fadeOut('slow');
});

Upvotes: 0

Related Questions