Add new input and use this without modify HTML

Question

I have only:

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

I can't modify html. I can use only jQuery. Is possible make something like:

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

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

Default if page is loaded and ready should be only:

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

If i checked this then show me div with textarea.

Is possible make without modify HTML? If yes, how?

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

binarious · Accepted Answer · 2012-03-09 13:57:50Z

3

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

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

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

edited Mar 9, 2012 at 13:57

answered Mar 9, 2012 at 13:51

binarious

4,58828 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MMM Over a year ago

You're missing the id in the checkbox

binarious Over a year ago

Thanks, but it's not necessary for this example.

binarious Over a year ago

You could do var checkbox = $('<div>TEST TEST</div><input type="checkbox">');

binarious Over a year ago

note that this would add a clickhandler to the text, too. You should create another Object for that.

KP. · Accepted Answer · 2012-03-09 14:11:53Z

1

Try the following

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

You can improve the checkbox functionality by using toggle instead of show

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

As the name suggests it will toggle the visibility, so if you deselect the checkbox it hides the content.

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

edited Mar 9, 2012 at 14:11

KP.

13.8k3 gold badges43 silver badges60 bronze badges

answered Mar 9, 2012 at 13:52

MMM

7,3402 gold badges27 silver badges42 bronze badges

3 Comments

binarious Over a year ago

When #yes is checked, your textarea is hidden

KP. Over a year ago

+1. Beat me to it with same code, may as well have my fiddle [edited].

MMM Over a year ago

@DirkShags Your own text works for me, what's the issue you're experiencing?

Simon · Accepted Answer · 2012-03-09 13:56:13Z

0

Yes, you can do this.

$("#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/

answered Mar 9, 2012 at 13:56

Simon

3812 silver badges11 bronze badges

Collectives™ on Stack Overflow

Add new input and use this without modify HTML

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related