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

Posted 2023-05-07

【中文标题】如何使用 javascript 隐藏/取消隐藏 div？ [复制]

【英文标题】：How to hide/unhide div using javascript? [duplicate]

【发布时间】：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，如果没有选中，我想取消隐藏。我希望它是动态的。我怎么做？

【问题讨论】：

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

【参考方案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()
    
);