在选中和取消选中复选框时显示和隐藏 div答案

【问题标题】：Show and hide div on check and uncheck of checkbox在选中和取消选中复选框时显示和隐藏 div
【发布时间】：2016-06-30 11:12:07
【问题描述】：

我想在选中和取消选中复选框时隐藏和显示 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>

【问题讨论】：

jsfiddle.net/ro8pghw5

标签： javascript jquery html css

【解决方案1】：

为什么你的代码不起作用：

$(this).parent() 会给你label - 而find('.div-check') 不会返回任何东西。

使用 closest() - 获取具有所需子元素的共同父元素，

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

另外，我建议您在下面的复选框中使用 change() 事件而不是 click()，

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

【讨论】：

【解决方案2】：

改用这个脚本

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

【讨论】：

【解决方案3】：

使用$('input').is(':checked')

在您的示例中：$(this).is(':checked')

您必须使用 parents() 选择正确的包装器才能找到您的元素 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');
});

【讨论】：

【解决方案4】：

使用$(this).closest(".type-details").find('.div-check') 获取div-check div 并隐藏/显示它。

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

【讨论】：

【解决方案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');
});

【讨论】：

【解决方案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>

【讨论】：