Show/ Hide Fields using radiobutton and jQuery

Question

How do I make the fields come hidden and only appear with a radio selection?

Below I will put the fields and the script I use to hide as I click (what is already working) my problem is, that when I open the forms, the fields are there and I need them to appear only when I select some Button of type Radio

follow:

<script>                    
$(function(){
    $('#aprovadoSim').change(function(){
        $('#divWelcome').show();                            
        $('#divObservacoes').hide();                                                    
        $('#divRetornoCliente').hide();                         

    });
    $('#aprovadoNao').change(function(){    
        $('#divObservacoes').show();
        $('#divWelcome').hide(); 
        $('#divRetornoCliente').hide(); 
    });

    $('#aprRetornoSim').change(function(){
        $('#divWelcome').show(); 
        $('#divObservacoes').hide();
        $('#divRetornoCliente').hide(); 
    });

    $('#aprRetornoNao').change(function(){  
        $('#divObservacoes').hide();
        $('#divWelcome').hide(); 
        $('#divRetornoCliente').show(); 
    });
});         
</script>

HTML

<fieldset id="fs_aprovacao">
    <div class="panel panel-truecpa">
        <legend></legend><br />             
        <div class="panel-body">
            <div class="col-sm-12 col-sm-offset-2">
                <div class="form-group" style="margin: 0 auto;">
                    <div class="col-sm-6" id="divAprovado">                                 
                        <label for="aprovado" class="col-sm-8 control-label">Aprovado?</label>                                          
                        <div class="radio" >
                            <label> <input type="radio" name="aprovado" id="aprovadoSim" value="SIM"  >Sim </label>&nbsp;&nbsp;
                            <label> <input type="radio" name="aprovado" id="aprovadoNao" value="NAO" checked> Não </label>&nbsp;&nbsp;
                        </div>                                          
                    </div>                                          
                </div></br>
                <div class="form-group" style="margin: 0 auto;">
                    <div class="col-sm-6" id="divAprRetorno">                                   
                        <label for="aprRetorno" class="col-sm-8 control-label">Aprovado?</label>                                            
                        <div class="radio" >
                            <label> <input type="radio" name="aprovadoRetorno" id="aprRetornoSim" value="SIM"  >Sim </label>&nbsp;&nbsp;
                            <label> <input type="radio" name="aprovadoRetorno" id="aprRetornoNao" value="NAO" > Não </label>&nbsp;&nbsp;
                        </div>                                          
                    </div>                                          
                </div></br>

                <div class="form-group" style="margin: 0 auto;">
                    <div class="col-sm-8" id="divWelcome">
                        <label for="nofiticaAdmissao" class="control-label">E-mail de Confirmação:</label>
                        <select  class="form-control" id="nofiticaAdmissao" name="nofiticaAdmissao" dataset="colleague" datasetkey="colleaguePK.colleagueId" datasetvalue="colleagueName"></select>                                                                     
                        <input type="hidden" id="colleagueId" name="colleagueId" />
                    </div>  
                </div>
                <div class="form-group" style="margin: 0 auto;" id="divObservacoes">
                    <div class="col-sm-8" id="definicaoCliente" >
                        <label for="observacoes" class="control-label">Observações:</label>
                        <textarea class="form-control" name="observacoes" id="observacoes" rows="4" ></textarea>
                    </div>
                </div><br/> 
                <div class="form-group" style="margin: 0 auto;" id="divRetornoCliente">
                    <div class="col-sm-8" id="definicaoCliente" >
                        <label for="retornoCliente" class="control-label">Observações:</label>
                        <textarea class="form-control" name="retornoCliente" id="retornoCliente" rows="4" ></textarea>
                    </div>
                </div><br/>                                             
            </div>
        </div>
    </div>
</fieldset>

Answer 1

Place in the line below: $(function(){ that:

$('#divWelcome, #divObservacoes, #divRetornoCliente').hide();                            

Answer 2

I don’t know if that would be the best way to do it but this way it works...

$('#checksim').click(function(){

  $('#input').removeAttr('type');
  $('#input').attr("type", "text")
})

$('#checknao').click(function(){

  $('#input').removeAttr('type');
  $('#input').attr("type","hidden")
})