1

クリックすると新しいテキストボックスを作成するチェックボックスを作成しようとしています。もう一度クリックすると、テキストボックスが削除されます。

現時点では、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
    }
4

3 に答える 3

1

pktangyueのソリューションは、formContainerに要素が1つしかない場合に機能しますが、常に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

チェックボックスを使用しました。falseの場合、値はtrueadd 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 に答える