复选框，添加或删除基于状态的文本框

Question

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

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

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

您可以使用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

我已经使用复选框选中值为true add text场如果假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/

Answer 3

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