1

I'm trying to create a checkbox that will create a new textbox once clicked. Clicked again, it will remove the textbox.

At the moment, it's just making a load of new textboxes as I don't know how to handle if statements inside of javascript. Can someone point me in the right direction please.

http://jsfiddle.net/v7gdX/

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

        </div>

And the 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
    }
4

3 回答 3

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";
}
于 2013-02-05T05:45:22.777 回答
0

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

于 2013-02-05T04:55:15.643 回答
0

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/

于 2013-02-05T05:06:48.500 回答