基于其他复选框选择显示/隐藏复选框

基础概念

在Web开发中，基于其他复选框的选择来显示或隐藏某些复选框是一种常见的交互设计。这种功能通常通过JavaScript来实现，结合HTML和CSS来控制元素的显示和隐藏。

类型

条件显示：根据某个复选框的选中状态来决定是否显示其他复选框。
级联显示：多个复选框之间形成级联关系，一个复选框的选择会影响下一组复选框的显示。

应用场景

表单定制：在复杂的表单中，允许用户根据需要选择显示哪些部分。
功能筛选：在软件的功能列表中，根据用户的选择展示相关功能选项。
配置选项：在产品配置页面，根据用户选择的模块动态加载配置选项。

示例代码

以下是一个简单的示例，展示了如何使用JavaScript来根据一个复选框的选择来显示或隐藏其他复选框。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox Visibility Example</title>
<style>
  .hidden { display: none; }
</style>
</head>
<body>

<label><input type="checkbox" id="mainCheckbox"> Main Option</label><br>
<div id="subOptions" class="hidden">
  <label><input type="checkbox" id="subCheckbox1"> Sub Option 1</label><br>
  <label><input type="checkbox" id="subCheckbox2"> Sub Option 2</label><br>
</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('mainCheckbox').addEventListener('change', function() {
  var subOptions = document.getElementById('subOptions');
  if (this.checked) {
    subOptions.classList.remove('hidden');
  } else {
    subOptions.classList.add('hidden');
  }
});