JQuery - Add new input field based on checkbox

Question

I have set up the following JSFiddle

My application has several .formContent rows, I am only displaying one row in the fiddle.

What I am trying to do is duplicate the div with the class .labelAndInput if the checkbox is checked, and place a new one underneath.

The new divs label and input should have the same id/name as the one copied, but with "testing" on the end of them.

At the moment I am trying something like this which does not seem to do anything :

$(function() {
  $('input:checkbox[name=label1Newline]').change(function() {
    if ($(this).checked) {
          $(this).parent().siblings(".labelAndInput").clone().insertAfter("div.labelAndInput:last");
    }
  });
});

How can I clone the div, change the ids/names to include testing, and then append it?

Thanks

change $(this).checked with $(this).prop("checked"). It works: jsfiddle.net/vt2czgse/43 — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Feb 24, 2016 at 17:27

Zakaria Acharki · Accepted Answer · 2016-02-24 17:33:31Z

3

Working fiddle

You should replace :

if ($(this).checked) {

By :

if ( $(this).is(':checked') ){
//OR
if ( this.checked ){

NOTE : The new divs label and input should have the same id/name, Be careful the id should be unique in the same document.

Hope this helps.

edited Feb 24, 2016 at 17:33

answered Feb 24, 2016 at 17:27

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

8 Comments

Marcos Pérez Gude Over a year ago

Yes, his code is full of bugs even in a 5 lines code, but this solves the problem that OP asking for

Marcos Pérez Gude Over a year ago

My comment here was a response to other user that said the code is full of bugs, but he removed the comment LOL

katie hudson Over a year ago

Thanks, that seemed to work. Is my code full of bugs? Additionally, is there any way to change the name and id of the cloned element? Thanks

Zakaria Acharki Over a year ago

You're welcome, you want every time the checkbox checked to add one labe+input or like the current code add 1 in first time 2 second check...?

Zakaria Acharki Over a year ago

IMO better to separate model that will be cloned every time in the end of the page then before insert it in the last position (just after new line checbox) change the id like you want check the following fiddle jsfiddle.net/vt2czgse/44.

|

Collectives™ on Stack Overflow

JQuery - Add new input field based on checkbox

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related