チェックボックスを表示して非表示にするチェックボックスをオフにする

Question

チェックボックスを非表示にして表示し、チェックボックスをオフにしたい。私は親を得て、私が隠したい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'); 

---

、希望の子要素を持っている共通の親を取得するには、私はあなたの中にあるチェックボックスに代わりclick()のchange()イベントを使用することをお勧めしたいです以下、

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

Answer 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>

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>