JavaScript复选框脚本求助：复选框联动文本框校验与隐藏需求

嘿，作为JavaScript初学者遇到这种联动问题太正常了，我帮你理清楚逻辑，直接上可运行的代码，再一步步拆解细节：

完整代码示例 #

首先补全HTML结构（我加了第二个复选框和提交按钮，方便你直接测试）：

<!DOCTYPE html>
<html>
<body>
  <label> bangkirai 
    <input id="chk_bangkirai" type="checkbox" onchange="enableTextBox(this)" /> 
  </label>
  <input type="text" id="txt_bangkirai" style="display: none;" placeholder="请填写bangkirai相关内容">
  <br><br>

  <label> merbau 
    <input id="chk_merbau" type="checkbox" onchange="enableTextBox(this)" /> 
  </label>
  <input type="text" id="txt_merbau" style="display: none;" placeholder="请填写merbau相关内容">
  <br><br>

  <button onclick="validateCheckboxes()">提交</button>

  <script>
    // 处理复选框切换，显示/隐藏对应文本框
    function enableTextBox(checkbox) {
      // 根据复选框ID拼接对应文本框的ID（比如chk_bangkirai → txt_bangkirai）
      const textBoxId = checkbox.id.replace('chk_', 'txt_');
      const textBox = document.getElementById(textBoxId);
      
      if (checkbox.checked) {
        textBox.style.display = 'inline-block'; // 勾选时显示文本框
      } else {
        textBox.style.display = 'none'; // 取消勾选时隐藏文本框
        textBox.value = ''; // 可选：隐藏时清空文本框内容，避免残留旧数据
      }
    }

    // 验证勾选的复选框对应的文本框是否为空
    function validateCheckboxes() {
      // 获取页面上所有复选框
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      let isValid = true;

      checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
          const textBoxId = checkbox.id.replace('chk_', 'txt_');
          const textBox = document.getElementById(textBoxId);
          // 去除首尾空格后检查是否为空，避免用户只输入空格
          if (textBox.value.trim() === '') {
            alert(`请填写${checkbox.nextSibling.textContent.trim()}对应的内容！`);
            textBox.focus(); // 让空文本框自动获得焦点，方便用户直接输入
            isValid = false;
            return; // 找到第一个错误就停止遍历，不用挨个提示
          }
        }
      });

      if (isValid) {
        alert('所有填写都符合要求！');
        // 这里可以添加表单提交的逻辑，比如发送数据到后端
      }
    }
  </script>
</body>
</html>

关键逻辑拆解 #

• 复选框联动文本框：

  • 给onchange事件传入this，这样函数能直接拿到触发事件的复选框，不用为每个复选框写单独的函数，代码更简洁。
  • 用replace('chk_', 'txt_')把复选框ID转换成对应文本框的ID，以后再加更多复选框，只要保持ID命名规则一致，函数不用改。
  • 取消勾选时清空文本框是可选操作，如果你想保留用户之前输入的内容，删掉textBox.value = ''就行。

• 空值验证：

  • 用querySelectorAll批量获取所有复选框，遍历检查每个被勾选的项。
  • trim()能去掉文本内容的首尾空格，避免用户只输入空格就提交的情况。
  • 弹出提示后让空文本框获得焦点，用户不用手动点击文本框，体验更好。

测试方法 #

1. 勾选任意复选框，对应的文本框会立刻显示出来。
2. 取消勾选，文本框会自动隐藏。
3. 勾选复选框但不填写内容，点击提交按钮会弹出提示，引导你填写对应内容。

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