如何在选中复选框时动态生成和验证输入文本框

<input type="checkbox" id="checkbox" onchange="generateTextBox()">
<div id="textbox-container"></div>

function generateTextBox() {
  var checkbox = document.getElementById("checkbox");
  var container = document.getElementById("textbox-container");

  // 检查复选框是否被选中
  if (checkbox.checked) {
    // 创建文本框元素
    var textBox = document.createElement("input");
    textBox.type = "text";
    textBox.id = "dynamic-textbox";
    textBox.placeholder = "请输入文本";

    // 将文本框添加到容器中
    container.appendChild(textBox);

    // 添加验证事件监听器
    textBox.addEventListener("input", validateTextBox);
  } else {
    // 清空容器中的文本框
    container.innerHTML = "";
  }
}

function validateTextBox() {
  var textBox = document.getElementById("dynamic-textbox");

  // 进行文本框验证逻辑，例如检查是否为空
  if (textBox.value.trim() === "") {
    textBox.style.border = "1px solid red";
  } else {
    textBox.style.border = "1px solid green";
  }
}