Показать и скрыть div on check and discheck of checkbox

Question

Я хочу скрыть и показать div на чеке и снять флажок. Я получаю родителя и нахожу div, который я хочу скрыть. Но код не работает

Jquery является:

$('.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> 

Answer 1

Используйте этот скрипт вместо

$('.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>

Answer 2

Использование $('input').is(':checked')

В вашем примере: $(this).is(':checked')

Вы должны использовать родители() для выбора нужной оболочки для поиска элемента 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'); 
}); 

Answer 3

Почему ваш код не работает:

$(this).parent() даст вам label - и find('.div-check') ничего не вернется.

---

Использование closest() - получить общий родитель, который имеет нужный дочерний элемент,

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

---

Кроме того, я предлагаю вам использовать change() событие вместо click() на флажок в ниже,

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

Answer 4

Используйте $(this).closest(".type-details").find('.div-check'), чтобы получить div div-check и скрыть/показать его.

$('.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>

Answer 5

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

Answer 6

Попробуйте этот код:

$('.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>