Question

我只有：

<div>
    <textarea id="names"></textarea>
</div>

我无法修改html。我只能使用jQuery。有可能做出类似的事情：

<input type="checkbox" id="yes">
<div style="display:none">
   <textarea id="names"></textarea>
</div>

$("#yes").click(function(){
    $("#names").parent().show();
})

默认情况下，如果页面已加载且准备就绪：

<input type="checkbox" id="yes">

如果我选中了这个，那就用textarea告诉我div。

可以不修改HTML吗？如果是，怎么样？

FIDDLE：http://jsfiddle.net/2ZMQz/

Answer 1

var checkbox = $('<input type="checkbox">');
var parent   = $('#names').parent().hide().before(checkbox);

checkbox.click(function() {
    parent.toggle();
});

http://jsfiddle.net/2ZMQz/14/

Answer 2

尝试以下

$("#names").parent().hide().before('<input type="checkbox" id="yes" />');

您可以使用切换而不是显示

来改进复选框功能

$("#yes").click(function(){
    $("#names").parent().toggle();
})

顾名思义，它会切换可见性，因此如果您取消选中该复选框，则会隐藏内容。

http://jsfiddle.net/2ZMQz/7/

Answer 3

是的，你可以这样做。

$("#names").parent().hide().before('<input type="checkbox" id="yes">');

$("#yes").click(function() {
    if ($(this).is(':checked')) {
        $("#names").parent().show();
    } else {
        $("#names").parent().hide();    
    }});

http://jsfiddle.net/2ZMQz/15/

添加新输入并使用此输入而不修改HTML

3 个答案: