How to make editable radiobutton?

Question

Next, I will have to add radiobuttons dynamically, in that they will have to be able to write. They come as label ne? I needed to be able to edit this label, it could be a text too, the important thing is to be able to add the radiobutton and the user can write whatever you want on the label

---

Thank you for answering Junior, just a doubt. my html ta thus:

                  <div class="form-group esconder" id="id_2">
              <div class="panel panel-default">
                 <div class="panel-body">
                    <div id="multipla-escolha">
                       <label class="" for="orderBy">Pergunta</label>
                       <input class="form-control " type="text" placeholder="Pergunta">
                       <div class="container">
                          <div id="radios">
                             <div>
                                <input type="radio" value="teste" name="data">
                             </div>
                          </div>
                          <button id="add">+</button>
                       </div>
                    </div>
                 </div>
              </div>
           </div>

and when it renders it already brings 2 radio, and when I click on anything, it adds more radios, knows what can be?

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
    if(event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
      $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
      $(this).prop('contenteditable', false); // Desabilita o campo de edição
    }
  })
  .blur(function() {
    $(this).prev('input').val(this.innerHTML);
    $(this).prop('contenteditable', false);
  });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" value="" name="data">';
  html += '<label contenteditable="true"></label>';
  html += '</div>';
  
  $('#radios').append(html); // Adiciona o novo input dentro da div radios
  
  loadEditLabel(); // Carrega o radio para a edição
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" value="teste" name="data">
    <label>Teste</label>
  </div>
  <div>
    <input type="radio" value="teste2" name="data">
    <label>Teste2</label>
  </div>
</div>

<button id="add">+</button>

---

I will add a print, because simulating by jsfiddle does not happen the same error. Just so you know, he’s getting all the clicks before he even gets to the screen, and he’s adding the radio.

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data">';
  html += '<input type="text" placeholder="Nova Entrada">';
  html += '</div>';

  $('#radios').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="Opção 1">
  </div>
</div>

<button id="add">+</button>

Answer 1

Do you want to say something along those lines? The label can be a text input?

<h3>Sexo:</h3>
<form action="">
  <input type="radio" style="vertical-align: text-bottom;" name="gender" value="male"> <input type="text" placeholder="Masculino"><br>
  <input type="radio" style="vertical-align: text-bottom;" name="gender" value="female"> <input type="text" placeholder="Feminino"><br>
</form>

Using the JS provided by @Juniornunes you could also do something on that line:

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
      if (event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
        $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
        $(this).prop('contenteditable', false); // Desabilita o campo de edição
      }
    })
    .blur(function() {
      $(this).prev('input').val(this.innerHTML);
      $(this).prop('contenteditable', false);
    });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" style="vertical-align: text-bottom;" value="teste" name="data">';
  html += '<input type="text" placeholder="Nova Entrada">';
  html += '</div>';

  $('#radios').append(html); // Adiciona o novo input dentro da div radios

  loadEditLabel(); // Carrega o radio para a edição
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" style="vertical-align: text-bottom;" value="teste" name="data"><input type="text" value="Opção 1">
  </div>
</div>

<button id="add">+</button>

Answer 2

You can do so too:

function loadEditLabel() {
  // Salva o novo input saindo do campo ou apertando enter
  $('[contenteditable="true"]').focus().select().keydown(function(event) {
    if(event.key == 'Enter') { // Checa se a tecla digitada foi o Enter
      $(this).prev('input').val(this.innerHTML); // Colocar o value do input com o texto digitado
      $(this).prop('contenteditable', false); // Desabilita o campo de edição
    }
  })
  .blur(function() {
    $(this).prev('input').val(this.innerHTML);
    $(this).prop('contenteditable', false);
  });
}

$('#add').click(function() {
  html = '<div>';
  html += '<input type="radio" value="" name="data">';
  html += '<label contenteditable="true"></label>';
  html += '</div>';
  
  $('#radios').append(html); // Adiciona o novo input dentro da div radios
  
  loadEditLabel(); // Carrega o radio para a edição
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="radios">
  <div>
    <input type="radio" value="teste" name="data">
    <label>Teste</label>
  </div>
  <div>
    <input type="radio" value="teste2" name="data">
    <label>Teste2</label>
  </div>
</div>

<button id="add">+</button>

NOTE: Tested in Chrome Version 59.0