复选框在勾选/取消勾选时显示div。但在浏览器中“返回”时div是隐藏的

复选框在勾选/取消勾选时显示div是一种常见的前端交互效果，可以通过JavaScript和CSS来实现。

首先，我们需要在HTML中定义一个复选框和一个div元素，如下所示：

<input type="checkbox" id="checkbox">
<div id="content" style="display: none;">这是要显示的内容</div>

接下来，我们可以使用JavaScript来监听复选框的状态变化，并根据状态来显示或隐藏div元素。可以使用addEventListener方法来添加事件监听器，如下所示：

var checkbox = document.getElementById("checkbox");
var content = document.getElementById("content");

checkbox.addEventListener("change", function() {
  if (checkbox.checked) {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

在上面的代码中，我们通过checkbox.checked属性来判断复选框是否被勾选。如果被勾选，我们将div的display属性设置为"block"，使其显示出来；如果未勾选，我们将display属性设置为"none"，使其隐藏起来。

此外，我们还可以使用CSS来美化div的样式，例如设置背景颜色、边框等。可以根据实际需求进行样式调整。

这种效果在实际开发中经常用于表单中的选项展示和隐藏，可以提升用户体验和界面交互性。

腾讯云相关产品推荐：

• 腾讯云云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。产品介绍链接：https://cloud.tencent.com/product/cvm
• 腾讯云云函数（SCF）：无服务器计算服务，可实现按需运行代码，无需管理服务器。产品介绍链接：https://cloud.tencent.com/product/scf
• 腾讯云云数据库MySQL版（TencentDB for MySQL）：提供稳定可靠的云数据库服务，适用于各种规模的应用。产品介绍链接：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云CDN加速（CDN）：提供全球加速服务，加速内容分发，提升用户访问速度。产品介绍链接：https://cloud.tencent.com/product/cdn