Question

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

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

        <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

您可以使用document.getElementById("formContainer").innerHTML = '';将其删除。

我改变你的js代码如下：

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

document.getElementById("chk").onclick = function () {
    if (textboxId == 0) {
        document.getElementById("formContainer").appendChild(CreateTextbox(textboxId));
        textboxId = 1;
    } else if (textboxId == 1) {
        document.getElementById("formContainer").innerHTML = '';
        textboxId = 0;
        //The code to remove the previosuly made textbox
    }
}

这是jsfiddle。 http://jsfiddle.net/v7gdX/2/

Answer 2

虽然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";
}

Answer 3

我使用复选框选中的值为true add text字段，如果为false remove text box

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

        return textBox;
        }


        document.getElementById("chk").onclick = function () 
        { 

        if(document.getElementById("chk").checked) {
            document.getElementById("formContainer").appendChild(CreateTextbox());
        } else {
            document.getElementById("formContainer").innerHTML = '';
            }

        }

检查此http://jsfiddle.net/pradkumar_n/hjaR5/

复选框，根据状态添加或删除文本框

3 个答案: