Как добавить текстовое поле в HTML динамически, используя JavaScript, нажав переключатель

Question

На html-странице мне нужны две радиокнопки, чтобы при выборе любой из них текстовое поле автоматически добавлялось в документ. Как получить этот эффект, используя событие onclick в javascript?

Answer 1

$("#radioButtonId").click(function(){
   var ctrl = $('<input/>').attr({ type: 'text', name:'text', value:'text'});
   $("#containerId").append(ctrl);
});

РЕДАКТИРОВАТЬ : Это использует jQuery в JavaScript. Чтобы получить jQuery, посмотрите здесь

Answer 2

, если вам не нужно поддерживать старый браузер и вы можете вставить свой входной текст, уже спрятанный на своей странице, тогда я предлагаю альтернативный чисто простой подход CSS, см. http://jsfiddle.net/wfwye/2/

<fieldset>
    <input type="radio" name="myradio" /><br>
    <input type="radio" name="myradio" /><br>
    ...
    <input type="text" />
</fieldset>

иcss

[type="radio"] ~ [type="text"] { visibility: hidden; }
[type="radio"]:checked ~ [type="text"] { visibility: visible; }

Я использовал здесь общий селектор брата (MDN) (~).
К сожалению, :checked псевдокласс не поддерживается IE <9 </p>

В противном случае «обычное» решение javascript довольно простое: если у вас есть

<fieldset>
    <input type="radio" name="myradio" /><br>
    <input type="radio" name="myradio" /><br>
</fieldset>

с использованием jQuery 1.7+, задача может быть выполнена следующим образом

$('input').on('click.appendInput', function() {
   $('<input type="text">').appendTo($(this).parent());
   $('input').unbind('click.appendInput');
});

unbind()в противном случае каждый раз, когда вы нажимаете на радиовход, вы добавляете новый текст (я не думаю, что вы хотите)

Answer 3

в событии onclick вызывает функцию и передает в нее this объект. В функции проверьте this.id, this.class или this.name, чтобы убедиться, что это радио-кнопка, для которой вы хотите добавить текстовое поле.

в функции записи

var txt = document.createElement('input');
element.setAttribute("type", 'text');
element.setAttribute("name", 'name');
//select element in which you want to append textbox
var foo = document.getElementById("fooBar")
foo.appendChild(element);