Radio input values stay inside an array

Asked

Viewed 58 times

0

I do not know if I was clear in my question, but I have the following form:

inserir a descrição da imagem aqui

When another field is added and when it is selected for example Children in lap? in the second field, it unchecks the first. See below:

inserir a descrição da imagem aqui

How can I make so that always selecting the other created fields, the previous ones remain with their values marked?

<table border="0" width="100%">
<tr class='linhas'>
  <td>
  <table border="0" width="100%">
    <tr>
    <td  style="padding: 5px"><input type="text" name="NomePAX[]" class="form-control" placeholder="Nome do pax" value=""></td>
    <td  style="padding: 5px">
      <select name="TipoDocumento" class="form-control">
        <option>Tipo de documento</option>
      </select>
    </td>
    <td  style="padding: 5px">
      <input type="text" name="RGPessoaAutorizada[]" class="form-control" placeholder="RG da pessoa autorizada" value="">
      <!-- <input type="text" name="CPF" id="cpf" class="form-control" data-inputmask="'alias': '999.999.999-99'"> -->
    </td>
  </tr>
  <tr>
  <td style="padding: 5px">
    <label>Crianças de colo? <small>até 06 anos</small></label><br>
    <input type="radio" name="CriancasColo[]" value="Sim"> Sim
    <input type="radio" name="CriancasColo[]" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Crianças entre 06 e 12 anos?</label><br>
    <input type="radio" name="Criancas6e12[]" value="Sim"> Sim
    <input type="radio" name="Criancas6e12[]" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Adolescentes entre 12 e 18 anos?</label><br>
    <input type="radio" name="Adolescentes[]" value="Sim"> Sim
    <input type="radio" name="Adolescentes[]" value="Não"> Não
  </td>
</tr>
</table>
</td>
    <td style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
<tr>
    <td colspan="3"><button type="button" class="adicionarCampo btn btn-primary" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Adicionar mais passageiros</button></td>
</tr>
</table>

Jquery

<script type="text/javascript">
     $(function () {
       function removeCampo() {
             $(".removerCampo").unbind("click");
             $(".removerCampo").bind("click", function () {
                if($("tr.linhas").length > 1){
                     $(this).parent().parent().remove();
                }
             });
       }
       $(".adicionarCampo").click(function () {
         if ($('.linhas').length < 15) {
             novoCampo = $("tr.linhas:first").clone();
             novoCampo.find('input[type="text"]').val("");
             novoCampo.find('select').val("");
             novoCampo.insertAfter("tr.linhas:last");
             removeCampo();
           }
       });
     });
 </script>

1 answer

1


What happens is that when you check an option RADIO, this will be unchecked when you select another option RADIO with even NAME.

You have to change the name of inputs RADIO of every created field

In inputs type RADIO of your HTML replace the brackets in name by the digit 0 (zero) and add a class to each group as indicated in the HTML code below

<tr>
  <td style="padding: 5px">
    <label>Crianças de colo? <small>até 06 anos</small></label><br>
    <input type="radio" class="CriancasColo" name="CriancasColo0" value="Sim"> Sim
    <input type="radio" class="CriancasColo" name="CriancasColo0" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Crianças entre 06 e 12 anos?</label><br>
    <input type="radio" class="Criancas6e12" name="Criancas6e120" value="Sim"> Sim
    <input type="radio" class="Criancas6e12" name="Criancas6e120" value="Não"> Não
  </td>
  <td  style="padding: 5px">
    <label>Adolescentes entre 12 e 18 anos?</label><br>
    <input type="radio" class="Adolescentes" name="Adolescentes0" value="Sim"> Sim
    <input type="radio" class="Adolescentes" name="Adolescentes0" value="Não"> Não
  </td>
</tr>

In function adicionarCampo add these lines

var x = ($('.linhas').length);
novoCampo.find('.CriancasColo').attr('name', 'CriancasColo' + x);
novoCampo.find('[name*=CriancasColo]').prop('checked',false);
novoCampo.find('.Criancas6e12').attr('name', 'Criancas6e12' + x);
novoCampo.find('[name*=Criancas6e12]').prop('checked',false);
novoCampo.find('.Adolescentes').attr('name', 'Adolescentes' + x);
novoCampo.find('[name*=Adolescentes]').prop('checked',false);

Add function

$(".adicionarCampo").click(function () {
    if ($('.linhas').length < 15) {
        novoCampo = $("tr.linhas:first").clone();
        novoCampo.find('input[type="text"]').val("");
         
        var x = ($('.linhas').length);
        novoCampo.find('.CriancasColo').attr('name', 'CriancasColo' + x);
        novoCampo.find('[name*=CriancasColo]').prop('checked',false);
         
        novoCampo.find('.Criancas6e12').attr('name', 'Criancas6e12' + x);
        novoCampo.find('[name*=Criancas6e12]').prop('checked',false);
         
        novoCampo.find('.Adolescentes').attr('name', 'Adolescentes' + x);
        novoCampo.find('[name*=Adolescentes]').prop('checked',false);
         
        novoCampo.find('select').val("");
        novoCampo.insertAfter("tr.linhas:last");
        removeCampo();
    }
});

NOTE: If you check the Radios inputs before creating new fields, these new fields will come with the inputs marked as before. To avoid this fact we add .prop('checked',false); for each new field created.

  • Perfect Match. It worked! Thank you very much!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.