如何使用 javascript 隐藏/取消隐藏 div？ [复制]答案

【问题标题】：How to hide/unhide div using javascript? [duplicate]如何使用 javascript 隐藏/取消隐藏 div？ [复制]
【发布时间】：2016-07-08 08:33:41
【问题描述】：

我的 index.html 文件中有一个复选框

@Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })  

<div id='Shipping'> 
      <p> Some textboxes here </p>
</div>

如果复选框被选中，我想隐藏啜饮的 div，如果没有选中，我想取消隐藏。我希望它是动态的。我怎么做？

【问题讨论】：

整个互联网上有成千上万的解决方案来解决这个问题。这个问题只是懒惰

标签： javascript c# jquery

【解决方案1】：

我猜你会先绑定到复选框的change 事件：

$('#isChecked').change(function() {
    //...
});

在该事件处理程序中，您将根据复选框的状态显示/隐藏div。可能是这样的：

if ($(this).is(':checked')) {
    $('#Shipping').show();
} else {
    $('#Shipping').hide();
}

当然，您还需要设置一个初始值。实现两者的简单方法可能是将逻辑包装在一个函数中：

var toggleDiv = function () {
    if ($('#isChecked').is(':checked')) {
        $('#Shipping').show();
    } else {
        $('#Shipping').hide();
    }
}

然后从上面的事件处理程序中调用它：

$('#isChecked').change(toggleDiv);

当页面加载时：

toggleDiv();

【讨论】：

【解决方案2】：

您只需要将change 事件绑定到复选框并检查它的:checked 选择器以确定是否需要显示或隐藏div。

<script>
$().ready(function(){
  $('#isChecked').change(function()
   {
     $(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
   }).change(); // optional
  });
</script>

【讨论】：

谢谢。这解决了我的问题
当然。很高兴帮助:)

【解决方案3】：

javascript：

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $(this).removeClass("hide");
    } else {
        $(this).addClass("hide");
    }
});

css:

.hide{ display:none;}

HTML：

<div id='Shipping' class='hide'> </div>

【讨论】：

【解决方案4】：

$('#isChecked').change(function(){
    if($(this).is(":checked")) {
        $("#Shipping").hide()
    } else {
      $("#Shipping").show()
    }
});

【讨论】：