如何用JavaScript和HTML为多个Checkbox添加handleClick事件

问题场景 #

需要实现：勾选「找不到我的城市」或「找不到我的院校」复选框时，将对应的下拉选择组件替换为文本输入框。单独写一个handleClick函数时功能正常，但添加第二个同名函数后，只有第二个函数的逻辑生效。

问题原因 #

JavaScript中同名函数会被后面定义的覆盖，你写的第二个handleClick完全替换了第一个，所以不管点哪个复选框，都会执行院校相关的逻辑。

修复方案 #

把两个函数的逻辑合并成一个，通过识别触发复选框的特征来执行对应切换逻辑，下面提供两种实用实现方式：

方式1：通过复选框name属性区分逻辑 #

修改后的JavaScript代码：

function handleClick(checkbox) {
  // 处理城市组件切换
  if (checkbox.name === 'unfoundcity') {
    if (checkbox.checked) {
      console.log('城市复选框已勾选');
      document.getElementById('citysel').style.display = 'none';
      document.getElementById('citytex').style.display = 'block';
    } else {
      console.log('城市复选框已取消');
      document.getElementById('citysel').style.display = 'block';
      document.getElementById('citytex').style.display = 'none';
    }
  } 
  // 处理院校组件切换
  else if (checkbox.name === 'unfoundcollege') {
    if (checkbox.checked) {
      console.log('院校复选框已勾选');
      document.getElementById('collgesel').style.display = 'none';
      document.getElementById('collge').style.display = 'block';
    } else {
      console.log('院校复选框已取消');
      document.getElementById('collgesel').style.display = 'block';
      document.getElementById('collge').style.display = 'none';
    }
  }
}

对应HTML调整（修改院校复选框name属性，避免和输入框ID冲突）：

<!-- 院校部分复选框修改name -->
<span>
  <div class="check"> 
    <input type="checkbox" onclick='handleClick(this);' name="unfoundcollege" value="">
    找不到你的院校？
  </div>
</span>

方式2：自定义属性绑定目标元素（更易扩展） #

这种方式无需写多个判断逻辑，后续新增同类组件只需添加属性即可：

HTML给复选框添加自定义属性，指定要隐藏/显示的元素ID：

<!-- 城市复选框 -->
<input type="checkbox" name="unfoundcity" onclick='handleClick(this);' value="unfound" data-hide-id="citysel" data-show-id="citytex">

<!-- 院校复选框 -->
<input type="checkbox" onclick='handleClick(this);' name="unfoundcollege" value="" data-hide-id="collgesel" data-show-id="collge">

JavaScript代码：

function handleClick(checkbox) {
  const hideElement = document.getElementById(checkbox.dataset.hideId);
  const showElement = document.getElementById(checkbox.dataset.showId);
  
  if (checkbox.checked) {
    console.log(`${checkbox.name} 已勾选`);
    hideElement.style.display = 'none';
    showElement.style.display = 'block';
  } else {
    console.log(`${checkbox.name} 已取消`);
    hideElement.style.display = 'block';
    showElement.style.display = 'none';
  }
}

额外注意：原HTML中注释的/*display:none;*/建议移到CSS中统一设置：

#citytex, #collge {
  display: none;
}

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