如何用jQuery和JavaScript实现选中复选框时显示对应隐藏文本框？

刚好碰到过类似的需求，给你整理了jQuery和原生JavaScript两种实现方案，都能搞定复选框勾选/取消时对应文本框的显示切换，还会处理页面加载时已经勾选的复选框（比如你提到的问题1）的初始显示：

jQuery 实现方案 #

这个方案依赖jQuery库，写法更简洁：

$(document).ready(function() {
  // 页面加载完成后，先把已勾选复选框对应的文本框显示出来
  $('input[type="checkbox"]:checked').each(function() {
    $(this).siblings('.hidden-textbox').css('visibility', 'visible');
  });

  // 给所有复选框绑定状态变化事件
  $('input[type="checkbox"]').on('change', function() {
    const targetTextBox = $(this).siblings('.hidden-textbox');
    // 根据复选框状态切换文本框可见性
    targetTextBox.css('visibility', $(this).is(':checked') ? 'visible' : 'hidden');
  });
});

小提示：如果你的文本框和复选框不是直接同级元素，可以把.siblings('.hidden-textbox')改成$(this).parent().find('.hidden-textbox')，先找到共同父元素再定位文本框，适配更多DOM结构。

原生 JavaScript 实现方案 #

如果不想引入jQuery，用原生JS也能轻松实现：

document.addEventListener('DOMContentLoaded', function() {
  const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');

  allCheckboxes.forEach(checkbox => {
    // 处理页面加载时已勾选的情况
    if (checkbox.checked) {
      const textBox = checkbox.nextElementSibling;
      if (textBox?.classList.contains('hidden-textbox')) {
        textBox.style.visibility = 'visible';
      }
    }

    // 绑定复选框状态变化事件
    checkbox.addEventListener('change', function() {
      const textBox = this.nextElementSibling;
      if (!textBox || !textBox.classList.contains('hidden-textbox')) return;
      
      textBox.style.visibility = this.checked ? 'visible' : 'hidden';
    });
  });
});

小提示：如果文本框不是复选框的下一个同级元素，可以用this.closest('.question').querySelector('.hidden-textbox')来定位——先找到包含复选框的.question容器，再在里面找目标文本框，兼容性更好。

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