Question

在html页面中，我想要两个单选按钮，这样当我选择其中任何一个按钮时，文本框应自动添加到文档中。如何使用javascript中的onclick事件获得此效果？

Answer 1

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

编辑：这是在javascript中使用jQuery。让jQuery看起来here

Answer 2

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);

Answer 3

如果您不必支持旧浏览器，并且可以插入已隐藏在页面中的输入文本，那么我建议使用另一种纯粹的简单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; }

我在这里使用了general sibling selector (MDN) (~) 不幸的是，IE＆lt; 9

不支持:checked伪类

否则«常规»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()是应该的，否则每次点击收音机输入时你都会附加一个新的输入文字（我不认为这是你想要的）

如何通过单击单选按钮使用javascript动态添加html中的文本字段

3 个答案: