jQuery - 复选框取消选择不会淡入答案

【问题标题】：jQuery - checkbox unselect does not fade back injQuery - 复选框取消选择不会淡入
【发布时间】：2015-09-11 00:04:50
【问题描述】：

我有一点 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 路径时，我期望它，而不是 else。其次，一旦这些 div 淡出，当我取消选中该框时，它们不会淡出。我做错了什么？

【问题讨论】：

标签： jquery asp.net-mvc checkbox

【解决方案1】：

它不起作用的原因是因为复选框选中的属性正在更新，而不是它的属性值。

您也可以使用 .fadeToggle() 和 true/false 作为参数来做出显示/隐藏决定：

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

【讨论】：

谢谢。这样可行。我会尽快将其标记为答案。
@user2471435：很高兴它有帮助:)
fadeToggle() with true/false as an argument to make show/hide decision:????????? ，我认为只有toggle() 将布尔值作为参数而不是fadeToggle()
@PranavCBalan：是的....您之前也使用了相同的方法，然后更改了它。不是吗？？大多数切换方法都接受布尔参数来做出显示隐藏决定
@MilindAnantwar ：检查jsfiddle.net/pranavcbalan/waj6vpb2/1 ，我将true 作为参数传递，但它仍在切换:)....实际上在你的答案中不需要那个参数'....仅适用于切换....jsfiddle.net/pranavcbalan/r9h1ruot

【解决方案2】：

你可以使用

this.checked 获取复选框是否被选中
您可以使用, 分隔为'#HCV,#optIn,#Duopa' 的通用选择器

代码：

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

【讨论】：