複選框，添加或刪除基於狀態的文本框

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