按下复选框时使用CSS显示/隐藏

按下复选框时使用CSS显示/隐藏是一种常见的前端开发技术，可以通过CSS选择器和伪类来实现。

具体实现方法如下：

1. 首先，在HTML中创建一个复选框元素和一个需要显示/隐藏的目标元素。例如：

<input type="checkbox" id="checkbox">
<div id="target">这是需要显示/隐藏的内容</div>

1. 接下来，在CSS中定义目标元素的初始状态和复选框选中时的状态。例如：

#target {
  display: none; /* 初始状态隐藏 */
}

#checkbox:checked ~ #target {
  display: block; /* 复选框选中时显示 */
}

这里使用了CSS选择器中的兄弟选择器（~）和伪类（:checked）。当复选框被选中时，通过兄弟选择器找到目标元素，并将其显示出来。

1. 最后，可以通过JavaScript来添加交互功能，例如在复选框被点击时触发显示/隐藏效果。例如：

var checkbox = document.getElementById('checkbox');
var target = document.getElementById('target');

checkbox.addEventListener('click', function() {
  if (checkbox.checked) {
    target.style.display = 'block';
  } else {
    target.style.display = 'none';
  }
});

这样，当复选框被点击时，通过JavaScript判断复选框的选中状态，并相应地改变目标元素的显示/隐藏状态。

这种技术可以用于各种场景，例如实现展开/折叠效果、显示/隐藏菜单、切换显示内容等。在前端开发中非常常见。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云官网：https://cloud.tencent.com/
• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
• 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
• 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
• 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
• 腾讯云云安全中心：https://cloud.tencent.com/product/ssc
• 腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod
• 腾讯云元宇宙（Tencent Real-Time Render）：https://cloud.tencent.com/product/trtr