javascript - 根据状态添加或删除文本框的复选框

Question

我正在尝试创建一个复选框，单击该复选框将创建一个新的文本框。再次单击，它将删除文本框。

目前，它只是在加载新的文本框，因为我不知道如何处理 javascript 中的 if 语句。请有人指出我正确的方向。

http://jsfiddle.net/v7gdX/

        <input id="chk" type="checkbox" value="results" />  Results
        <div id="formContainer">

        </div>

和 Javascript

function CreateTextbox() {
        var textBox = document.createElement("input");
        textBox.setAttribute("type", "textbox");
        textBox.setAttribute("id", textboxId);
        textboxId++;
        return textBox;
        }

    var textboxId = 0;

    if(textboxId == 0)
    {
    document.getElementById("chk").onclick = function () 
    {
        document.getElementById("formContainer").appendChild(CreateTextbox(textboxId));
        var textboxId = 1;
    }
    }

    else if (textboxId == 1)
    {
        //The code to remove the previosuly made textbox
    }

Answer 1

虽然 pktangyue 的解决方案在 formContainer 中只有一个元素时有效，但它总是会删除整个 div。

此外，您正在处理此处的复选框。它已经可以告诉你它是否被选中，你不必自己保持它的状态。

function createTextBox() {
  var textBox = document.createElement("input");
  textBox.setAttribute("type", "text");
  return textBox;
}

var txt;
document.getElementById("chk").onchange = function() {
  var form = document.getElementById("formContainer");
  if(this.checked) {
    txt = createTextBox();
    form.appendChild(txt);
  }
  else
    form.removeChild(txt);
}

但是，如果只是在您选中复选框时隐藏或显示文本框，那么从 javascript 生成 DOM 元素是一种糟糕的形式。你最好用 html 编写文本框，将其 CSS 设置为

display: none;

然后使用像这样的 javascript 来切换它

document.getElementById("chk").onchange = function() {
  document.getElementById("myTextBox").style.display = this.checked ? "" : "none";
}