JSFiddle - React, Tailwind, and code Playground

by Felipe Franco

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form id="form">
     <input type='radio' name='tipopessoa' id='fisica'> Pessoa Física
     <input type='radio' name='tipopessoa' id='juridica'> Pessoa Jurídica
     <div id="documentType">
         <label></label>
         <input id='' type='text' name=''>
     </div>
</form>

JavaScript

(function($) {
    var documentType = $('#documentType');
    documentType.hide();
    function showInput(id) {
        if(id == 'fisica') {
            $('#documentType label').text('CPF');
            $('#documentType input').prop('name','cpf');
            $('#documentType input').prop('id','cpf');
            documentType.show();
        }
        if(id == 'juridica') {
            $('#documentType label').text('CNPJ');
            $('#documentType input').prop('name','cnpj');
            $('#documentType input').prop('id','cnpj');
            documentType.show();
        }
    }
    $(document).on('click', 'input[type=radio]', function(){
        var id = $(this).prop('id');
        showInput(id);
    });
}(jQuery));