如何用单个复选框切换多个动态添加的HTML密码输入框可见性？

我明白你要解决的问题——原来的单输入框切换逻辑没法覆盖动态新增的密码框，对吧？其实只需要把针对单个元素的操作改成批量处理，同时确保动态添加的输入框能被统一识别就行。下面是适配后的完整可运行方案：

核心思路 #

1. 给所有密码输入框（包括动态添加的）设置统一的类名，方便批量选择
2. 监听复选框的change事件，触发时遍历所有密码框，统一切换它们的type属性（password ↔ text）
3. 动态添加密码框时，确保新元素带上统一类名，并且同步当前的显示状态

完整代码示例 #

HTML结构 #

<!-- 全局切换复选框 -->
<label style="margin: 10px 0; display: block;">
  <input type="checkbox" id="toggle-all-passwords"> 
  <span>显示所有密码</span>
</label>

<!-- 初始密码框组 -->
<div class="password-container">
  <input type="password" class="password-input" placeholder="请输入密码">
</div>
<div class="password-container">
  <input type="password" class="password-input" placeholder="请输入确认密码">
</div>

<!-- 动态添加按钮 -->
<button id="add-password-btn" style="margin: 10px 0;">添加新密码框</button>

JavaScript逻辑 #

// 获取核心元素
const toggleCheckbox = document.getElementById('toggle-all-passwords');
const addPasswordBtn = document.getElementById('add-password-btn');

// 批量切换密码可见性的核心函数
function togglePasswordVisibility() {
  // 选中所有带password-input类的输入框（包括动态新增的）
  const allPasswordInputs = document.querySelectorAll('.password-input');
  
  // 遍历每个输入框，根据复选框状态切换type
  allPasswordInputs.forEach(input => {
    input.type = toggleCheckbox.checked ? 'text' : 'password';
  });
}

// 监听复选框的切换事件
toggleCheckbox.addEventListener('change', togglePasswordVisibility);

// 动态添加密码框的函数
function addNewPasswordInput() {
  // 创建新的密码框容器
  const container = document.createElement('div');
  container.className = 'password-container';
  
  // 创建密码输入框，必须带上统一类名
  const newInput = document.createElement('input');
  newInput.type = toggleCheckbox.checked ? 'text' : 'password';
  newInput.className = 'password-input';
  newInput.placeholder = `新密码 ${document.querySelectorAll('.password-input').length + 1}`;
  
  container.appendChild(newInput);
  document.body.appendChild(container);
}

// 监听添加按钮的点击事件
addPasswordBtn.addEventListener('click', addNewPasswordInput);

关键细节说明 #

• 统一类名的重要性：用password-input类代替原来的单个ID，这样不管是页面初始加载的元素，还是之后动态添加的，都能被querySelectorAll选中
• 实时遍历元素：每次触发复选框事件时，都会重新获取所有密码框，确保不会漏掉新添加的元素
• 状态同步：动态添加新输入框时，会根据当前复选框的状态设置初始的type，保证新元素和已有元素的显示状态一致

这样改造后，不管你添加多少个密码框，单个复选框都能一键切换所有输入框的可见性啦。

内容的提问来源于stack exchange，提问作者B.C