选中单个Checkbox时按ID显示对应Div的实现求助

• 核心功能：点击/触发特定输入控件（Checkbox、textarea、radio、select等）时，显示指定ID的Div；未触发时隐藏
• 限制规则：
  • 仅允许修改现有Div的ID
  • 输入控件与Div的关联需手动配置（无固定对应规律，支持一个控件对应多个Div、多个控件对应一个Div）
  • 兼容多种输入类型：checkbox、textarea、radio、select及常规input类型

示例元素 #

Checkbox示例（需添加ID用于关联） #

<input type="checkbox" name="versuch1" required="" value="checkbox1" id="checkbox1">

Div示例（可修改ID） #

<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-71c1c46" data-id="71c1c46" data-element_type="column" id="examplecolumn1">
  <!-- Div内容 -->
</div>

尝试过的无效代码及问题 #

尝试代码1 #

// Element id
var checkbox1 = document.getElementTagName("checkbox1");
var checkbox2 = document.getElementTagName("checkbox2");
var checkbox3 = document.getElementTagName("checkbox3");

// Column id
var examplecolumn1 = document.getElementsById("examplecolumn1");
var examplecolumn2 = document.getElementById("examplecolumn2");
var examplecolumn3 = document.getElementById("examplecolumn3");

function updateColumnsDisplay() {
  examplecolumn1.style.display = checkbox1.checked ? "block" : "none";
  examplecolumn2.style.display = checkbox2.checked ? "block" : "none";
  examplecolumn3.style.display = checkbox3.checked ? "block" : "none";
}

// event listeners to checkboxes
checkbox1.addEventListener("change", updateColumnsDisplay);
checkbox2.addEventListener("change", updateColumnsDisplay);
checkbox3.addEventListener("change", updateColumnsDisplay);

问题：使用了错误的DOM方法getElementTagName（应为getElementById），且getElementsById拼写错误（正确为getElementById）

尝试代码2 #

//element id
var checkbox1 = document.getElementById("checkbox1"); 
var checkbox2 = document.getElementById("checkbox2"); 
var checkbox3 = document.getElementById("checkbox3"); 

//column id
var examplecolumn1 = document.getElementById("examplecolumn1"); 
var examplecolumn2 = document.getElementById("examplecolumn2"); 
var examplecolumn3 = document.getElementById("examplecolumn3"); 

examplecolumn1.addEventListener("change", () => {
    if(checkbox1.checked){
        example-column1.style.display = "block";
    if(checkbox2.checked){
        example-column2.style.display = "block";
    if(checkbox3.checked){
        example-column3.style.display = "block";
    }else{
        examplecolumn1.style.display = "none";
        examplecolumn2.style.display = "none";
        examplecolumn3.style.display = "none";
    }
     })

问题：事件绑定到了Div而非输入控件；变量名使用example-column1（非法命名，应为examplecolumn1）；if语句嵌套错误且未闭合

解决方案：手动关联配置方案 #

通过配置映射关系实现灵活关联，兼容多种输入类型：

步骤1：给所有需关联的控件添加ID #

示例：

<!-- Checkbox -->
<input type="checkbox" name="versuch1" required="" value="checkbox1" id="checkbox1">
<input type="checkbox" name="versuch2" required="" value="checkbox2" id="checkbox2">

<!-- Radio -->
<input type="radio" name="radioGroup" id="radio1" value="radio1">
<input type="radio" name="radioGroup" id="radio2" value="radio2">

<!-- Select -->
<select id="select1">
  <option value="hide">隐藏Div</option>
  <option value="show">显示Div</option>
</select>

<!-- Textarea -->
<textarea id="textarea1"></textarea>

步骤2：编写关联脚本 #

// 手动配置关联规则：key为控件ID，value为对应Div的ID数组
const controlDivMap = {
  "checkbox1": ["examplecolumn1"],
  "checkbox2": ["examplecolumn2", "examplecolumn3"], // 一个控件对应多个Div
  "radio1": ["examplecolumn1"],
  "select1": ["examplecolumn2"],
  "textarea1": ["examplecolumn3"]
};

// 初始化：默认隐藏所有关联的Div
Object.values(controlDivMap).flat().forEach(divId => {
  const div = document.getElementById(divId);
  if (div) div.style.display = "none";
});

// 绑定事件处理函数
Object.keys(controlDivMap).forEach(controlId => {
  const control = document.getElementById(controlId);
  if (!control) return;

  const handleTrigger = () => {
    const divIds = controlDivMap[controlId];
    let shouldShow = false;

    // 根据控件类型判断显示条件
    switch(control.type) {
      case "checkbox":
      case "radio":
        shouldShow = control.checked;
        break;
      case "select-one":
        shouldShow = control.value === "show"; // 可自定义select的触发值
        break;
      case "textarea":
      case "text":
        shouldShow = control.value.trim() !== ""; // 有输入内容时显示
        break;
      default:
        // 其他类型控件可自定义判断逻辑
        shouldShow = control.value.trim() !== "";
    }

    // 更新对应Div的显示状态
    divIds.forEach(divId => {
      const div = document.getElementById(divId);
      if (div) div.style.display = shouldShow ? "block" : "none";
    });
  };

  // 根据控件类型绑定对应事件
  if (control.type === "textarea" || control.type === "text") {
    control.addEventListener("input", handleTrigger); // 实时响应输入
  } else {
    control.addEventListener("change", handleTrigger); // 状态变更时响应
  }
});

方案说明 #

• 仅需修改controlDivMap即可调整控件与Div的关联关系，无需改动其他代码
• 兼容多种输入类型，每种类型的触发逻辑可按需自定义
• 初始化时默认隐藏关联Div，避免页面加载时显示冗余内容
• 包含容错处理：若控件或Div不存在，脚本会自动跳过，不会抛出错误

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