チェックボックスがチェックされているときにdiv要素を非表示にする

Question

チェックボックスがオフの場合、Register.cshtmlビューで特定のdivを非表示にしようとしています。

スクリプトコード：

<script type="text/javascript"> 
$(document).ready(function() { 
    $(function() { 
     $('#profesor').change(function() { 
      value = $(this).val(); 
      if (value == 0) { 
       $('#smjer').hide(); 
      } 
      else { 
       $('#smjer').show(); 
      } 
     }); 
    }); 
}); 

チェックボックス 'profesor'：

<div class="form-group"> 
    <label asp-for="profesor" class="col-md-2 control-label"></label> 
    <div class="col-md-10"> 
     <input type="checkbox" asp-for="profesor" class="form-control" id="profesor"> 
     <span asp-validation-for="profesor" class="text-danger"></span> 
    </div> 
</div> 

div要素 'smjer'：

<div class="form-group" id="smjer"> 
    <label asp-for="smjer" class="col-md-2 control-label"></label> 
    <div class="col-md-10"> 
     <select asp-for="smjer" class="form-control"> 
      <option>Računarstvo</option> 
      <option>Menadžment turizma i sporta</option> 
      <option>Održivi razvoj</option> 
     </select> 
      <span asp-validation-for="smjer" class="text-danger"></span> 

私はプロジェクトを実行すると、 'Smjer'の入力フィールドがまだ存在し、 'profesor'チェックボックスをオンまたはオフにしてもdiv要素が表示されたり表示されたりしません。

Answer 1

チェックボックスの値が「0」のvalueという属性を持つ限り、コードは機能するはずです。しかし、それはそれを隠すだけです/それを一度表示します。チェックボックスをもう一度クリックすると、チェックボックスの値が同じであるため、表示/非表示にはなりません。

チェックマーク付き/チェック解除済みステータスに基づいて可視性を変更したい場合は、jQuery toggleメソッドを使用します。

$(function() { 

    $('#profesor').change(function() { 
     $('#smjer').toggle(); 
    }); 

}); 

Answer 2

$(document).ready(function() { 
 
     $('#profesor').change(function() { 
 
      value = $(this).val(); 
 
      if (!this.checked) { 
 
       $('#smjer').hide(); 
 
      } 
 
      else { 
 
       $('#smjer').show(); 
 
      } 
 
     }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label asp-for="profesor" class="col-md-2 control-label"></label> 
 
    <div class="col-md-10"> 
 
     <input type="checkbox" asp-for="profesor" class="form-control" id="profesor"> 
 
     <span asp-validation-for="profesor" class="text-danger"></span> 
 
    </div> 
 
</div> 
 

 
<div class="form-group" id="smjer"> 
 
    <label asp-for="smjer" class="col-md-2 control-label"></label> 
 
    <div class="col-md-10"> 
 
     <select asp-for="smjer" class="form-control"> 
 
      <option>Računarstvo</option> 
 
      <option>Menadžment turizma i sporta</option> 
 
      <option>Održivi razvoj</option> 
 
     </select> 
 
      <span asp-validation-for="smjer" class="text-danger"></span>