jQuery优化：实现多Checkbox对应Input切换无需重复代码

嘿，我懂你这种重复写代码的烦躁！每次加新Checkbox都要复制粘贴逻辑，完全不符合DRY原则对吧？这里有个超清爽的方案，不用新增重复类、if语句或者变量，不管你加多少个Checkbox，都能自动让它们独立控制对应的Input：

核心思路是利用DOM结构的分组关系定位对应元素，再通过事件委托统一处理所有Checkbox的状态变化，彻底告别重复代码。

第一步：调整HTML结构（语义化分组） #

把每个Checkbox和它对应的Input放在同一个容器里，这样能可靠地建立关联关系：

<!-- 每组包含一个Checkbox、标签和对应的输入框 -->
<div class="toggle-group">
  <input type="checkbox" />
  <label>控制输入框1</label>
  <input type="text" placeholder="输入框1" />
</div>
<div class="toggle-group">
  <input type="checkbox" />
  <label>控制输入框2</label>
  <input type="text" placeholder="输入框2" />
</div>
<!-- 随便加多少组都没问题，无需修改JS -->

第二步：基础CSS（默认隐藏输入框） #

/* 默认隐藏所有需要切换的输入框 */
.toggle-group input[type="text"] {
  display: none;
  margin-top: 8px;
}

第三步：核心JS代码（一段搞定所有） #

// 用事件委托监听整个文档的change事件
document.addEventListener('change', function(e) {
  // 只处理checkbox类型的元素，过滤其他事件
  if (e.target.type !== 'checkbox') return;
  
  // 找到当前Checkbox所在的分组容器，再定位到里面的文本输入框
  const targetInput = e.target.closest('.toggle-group').querySelector('input[type="text"]');
  
  // 根据勾选状态切换输入框的显示/隐藏
  targetInput.style.display = e.target.checked ? 'block' : 'none';
});

为什么这个方案好用？ #

• 零重复代码：不管新增多少个Checkbox组，JS代码完全不用改，事件委托会自动处理所有新元素。
• 无硬编码依赖：不用给每个元素加唯一ID、额外类或者变量，完全靠DOM结构的关联关系定位元素。
• 健壮性高：用closest()找父分组，再用querySelector()找对应Input，哪怕分组里的元素顺序微调（比如把label放在Checkbox前面），只要结构不变，代码依然有效。

如果不想用分组容器，也可以用元素的兄弟关系定位（不过结构变动时容易出错，更推荐分组方式）：

document.addEventListener('change', function(e) {
  if (e.target.type !== 'checkbox') return;
  
  // 遍历Checkbox的下一个兄弟元素，直到找到文本输入框
  let sibling = e.target.nextElementSibling;
  while (sibling) {
    if (sibling.type === 'text') break;
    sibling = sibling.nextElementSibling;
  }
  
  if (sibling) {
    sibling.style.display = e.target.checked ? 'block' : 'none';
  }
});

这样就完美实现了“每个Checkbox独立控制对应Input”的需求，扩展性拉满～

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