Добавляйте входы динамически в соответствии с выбором переключателя - PullRequest
Новая
       49

Добавляйте входы динамически в соответствии с выбором переключателя

0 голосов
/ 17 июня 2020

Я использую следующий код, который предназначен для отображения двух входов после выбора в соответствии с выбранным переключателем.
Только мне, возможно, придется включать его несколько раз динамически. И когда я добавляю динамически, появляются переключатели, но при выборе одного входы не появляются. Придется ли мне перезагружать javascript, чтобы снова использовать его? 

$(document).ready(function() {
    $('input:radio[name="radiocpfcnpj"]').on("change", function() {
        if (this.checked && this.value == 'cpf') {
            $("#cpfParteProcesso").show();
            $("#cnpjParteProcesso").hide();
            $("#cpfParteProcessoNome").show();
            $("#cnpjParteProcessoNome").hide();
            $("#add_interessado").show();
        } else {
            $("#cnpjParteProcesso").show();
            $("#cpfParteProcesso").hide();
            $("#cnpjParteProcessoNome").show();
            $("#cpfParteProcessoNome").hide();
            $("#add_interessado").show();
        }
    });
});

$(document).ready(function(e) {
    //Variáveis
    var html = '<div class="form-group"><label for="cpfParteProcesso">CPF/CNPJ da parte<small class="text-muted"> (escolha a opção)</small></label><div class="form-check"><input class="form-check-input" type="radio" id="cpfProcessoFilho" name="radiocpfcnpj" value="cpf"><label class="form-check-label">CPF</label><input class="form-check-input" type="radio" id="cnpjProcessoFilho" name="radiocpfcnpj" value="cnpj"><label class="form-check-label">CNPJ</label></div><input type="text" class="form-control cpfcnpj" id="cpfParteProcessoFilho" name="cpfParteProcesso" data-mask><input type="text" class="form-control cpfcnpj" id="cnpjParteProcessoFilho" name="cnpjParteProcesso" data-mask><button id="add_interessado" type="button" class="btn btn-primary btn-sm interessado">Remover</button></div>';
    //Adicionar linhas
    $("#add_interessado").click(function(e){
      $("#dadoscpfcnpj").append(html);
      $("#cpfParteProcesso").append(html);
      $("#cpfParteProcessoNome").append(html);
      $("#cnpjParteProcesso").append(html);
      $("#cnpjfParteProcessoNome").append(html);
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dadoscpfcnpj" class="form-group">
                  <label for="cpfParteProcesso">CPF/CNPJ da parte<small class="text-muted"> (escolha a opção)</small></label>
                  <div id="dadoscpfcnpj" class="form-group form-check">
                    <input class="form-check-input" type="radio" id="cpfProcesso" name="radiocpfcnpj" value="cpf">
                    <label class="form-check-label">CPF</label>
                    <input class="form-check-input" type="radio" id="cnpjProcesso" name="radiocpfcnpj" value="cnpj">
                    <label class="form-check-label">CNPJ</label>
                  </div>
                  <input type="text" class="form-control cpfcnpj" id="cpfParteProcesso" name="cpfParteProcesso" data-mask>
                  <input type="text" class="form-control cpfcnpj" id="cpfParteProcessoNome" name="cpfParteProcessoNome" >
                  <input type="text" class="form-control cpfcnpj" id="cnpjParteProcesso" name="cnpjParteProcesso" data-mask>
                  <input type="text" class="form-control cpfcnpj" id="cnpjParteProcessoNome" name="cnpjParteProcessoNome">
                  <button id="add_interessado" type="button" class="btn btn-primary btn-sm interessado" value="cpf">Adicionar interessado</button>               
                </div>
        </div>

`

...