jQuery - checkbox unselect не исчезает в

Question

У меня есть маленький кусок jQuery. При проверке флажка я хочу, чтобы некоторые части экрана исчезли, и когда я снова его проверю, для их отображения. Это делает затухания часть на флажок, но не выгорают на кусок JQuery выглядит следующим образом:.

<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $('#chkUnsubAll').change(function() { 
      if ($(this).attr("checked")) { 

       $('#HCV').fadeIn(); 
       $('#optIn').fadeIn(); 
       $('#Duopa').fadeIn(); 
       return; 
      } 
      else { 
       $('#HCV').fadeOut(); 
       $('#optIn').fadeOut(); 
       $('#Duopa').fadeOut(); 
      } 
     }); 
    }); 
</script> 

Соответствующая разметка:

<div class="row"> 
     @Html.CheckBoxFor(m => m.UnsubscribeAll, new { id = "chkUnsubAll"}) 
     @Html.Label("Unsubscribe from ALL AbbVie communications") 
    </div> 
    <hr/> 
    <div id="optIn"> 
     <div class="row"> 
      <div class="col-md-12">Optin Status:</div> 
     </div> 
    </div> 
    <div id="HCV"> 
     <div class="row"> 
      @Html.CheckBoxFor(m => m.HCV) 
      @Html.LabelFor(m => m.HCV) 
     </div> 
     <hr /> 
     <div class="row"> 
      <div class="col-md-offset-1">Consumer</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.HCCEPhone) 
       @Html.Label("HCCE - Phone") 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.HCCEMail) 
       @Html.Label("HCCE - Mail") 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.HCCEEMail) 
       @Html.Label("MCCE - Email") 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.HCCEInPerson) 
       @Html.Label("MCCE - In Person") 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-1">HCP</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.ClinicalDataMail) 
       @Html.Label("Clinical Data - Mail") 
      </div> 
     </div> 
     <div clsss="row"> 
      <div class="col-md-offset-2"> 
       @Html.CheckBoxFor(m => m.ClinicalDataEmail) 
       @Html.Label("Clinical Data - Email") 
      </div> 
     </div> 
    </div> 

    <hr/> 
    <div class="row" id="Duopa"> 
     @Html.CheckBoxFor(m => m.DUOPA) 
     @Html.LabelFor(m => m.DUOPA) 
    </div> 

Прежде всего, JQuery, кажется, назад к меня. Я ожидал этого, когда проверен, чтобы взять путь if, а не другой. Во-вторых, когда эти divs исчезли, они не исчезают, когда я снимаю флажок. Что я делаю не так?

Answer 1

Причина, по которой это не сработало, потому что проверяемое свойство checkbox обновляется, а не его значение атрибута.

Также вы можете использовать .fadeToggle() с истина/ложь в качестве аргумента, чтобы сделать решение показать/скрыть:

$(document).ready(function() { 
    $('#chkUnsubAll').change(function() { 
     $('#HCV,#optIn,#Duopa').fadeToggle(this.checked); 
     return; 
    }); 
}); 

Answer 2

Вы можете использовать

1. this.checked получить флажок или нет
2. Вы можете использовать общий селектор на ,, выделенный как '#HCV,#optIn,#Duopa'

КОД:

$(document).ready(function() { 
    $('#chkUnsubAll').change(function() { 
     var sel = $('#HCV,#optIn,#Duopa'); 
     if(this.checked) 
     sel.fadeIn(); 
     else 
     sel.fadeOut(); 
    }); 
});