咨询：Checkbox勾选时自动展开Detail Row的实现方法

一、复选框勾选自动展开详情行 #

可以通过监听复选框的change事件，在勾选时自动显示对应的详情行，取消勾选时隐藏，无需额外点击展开按钮。以下是原生HTML+JS的实现示例：

<!-- 复选框列表结构 -->
<div class="checkbox-item">
  <label>
    <input type="checkbox" class="trigger-checkbox"> 选项1
  </label>
  <!-- 详情行，默认隐藏 -->
  <div class="detail-row" style="display: none; margin-left: 20px; margin-top: 8px;">
    <label>辅助问题1：<input type="text" placeholder="请输入答案"></label>
  </div>
</div>

<div class="checkbox-item">
  <label>
    <input type="checkbox" class="trigger-checkbox"> 选项2
  </label>
  <div class="detail-row" style="display: none; margin-left: 20px; margin-top: 8px;">
    <label>辅助问题2：<input type="text" placeholder="请输入答案"></label>
  </div>
</div>

<script>
// 获取所有触发复选框
const checkboxes = document.querySelectorAll('.trigger-checkbox');
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    // 找到当前复选框对应的详情行
    const detailRow = this.closest('.checkbox-item').querySelector('.detail-row');
    // 根据勾选状态切换显示/隐藏
    detailRow.style.display = this.checked ? 'block' : 'none';
  });
});
</script>

如果使用Vue/React等框架，逻辑类似：绑定复选框的状态值，通过状态直接控制详情行的显示/隐藏，比如Vue用v-show、React用条件渲染。

二、优化多选项选择流程 #

针对“需点击下拉菜单查看初始选项、选更多要添加行”的问题，可直接将下拉菜单替换为复选框组，让用户一次性勾选多个初始选项，无需手动添加行：

<div class="option-group">
  <p>请选择初始选项：</p>
  <label><input type="checkbox" name="initial-option"> 选项A</label>
  <label><input type="checkbox" name="initial-option"> 选项B</label>
  <label><input type="checkbox" name="initial-option"> 选项C</label>
  <!-- 每个选项对应自己的详情行 -->
  <div class="detail-row" style="display: none; margin-left: 20px;">
    <label>选项A的辅助问题：<input type="text"></label>
  </div>
  <!-- 其他选项的详情行同理 -->
</div>

也可以用select标签的multiple属性实现多选下拉，但复选框组的交互更直观，用户无需按住Ctrl/Command键完成多选操作。

内容的提问来源于stack exchange，提问作者ellCoderSJS