Problems with .clone () for radio buttons

Question

Problems with .clone () for radio buttons

Navigation

#1 by (2 votes)

2

I'm making a "add" button that with each click adds a div com Radio buttons below the div itself. I'm having trouble clicking on the radios that when I click on some line added and click on another line it deletes the value clicked before and only leaves the value clicked at the moment.

This is my code:

   $("#adiciona-fone").click(function () {
     // altero o valor div // 
    var divDuplica = $("#duplica").clone();
    divDuplica.attr('id', 'duplica_'+contador);

    //altero o valor do id hidden //
    divDuplica.children(":input").attr('id','id-telefone_'+contador);

    // altero o valor do id da div que tem todos os radios
    divDuplica.children("#tipo-fone-pessoa").attr('id','tipo-fone-pessoa_'+contador);
    var divTipoFone = divDuplica.children("#tipo-fone-pessoa_"+contador);
    var inputDivTipoFone = divTipoFone.children('.radio').attr('id', 'radio_'+contador);

    // boto a div no fim da div.
    $("#duplica").after(divDuplica);
    contador++
    return false;
});

This is my html:

jquery clone radiobutton

asked by anonymous 15.12.2015 / 13:46

1 answer

How to separate global functions / variables from the program into files? Problem with slick carrousel and modal bootstrap

score 2 · Accepted Answer

Radio buttons "interact with each other" through the name.

When you clone a line with radio buttons you are actually adding new options to the radio buttons of the previous line.

I suggest you create an intelligence to add new lines without using the clone, so you use a different name.

Or use the same methods you used to give a unique id only for the name attribute.