Exibr Campo selecionar Radio

Exibir campo ao selecionar radio

by Rapha Souza

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
          <div class="form-group col-md-2">

                     <div class="funkyradio funkyradio-success">
                         <input type="radio" name="Radio" id="Aprovado" value="Aprovado" onclick="validaAjustar()"/>
                         <label for="Aprovado">Aprovado</label>
                     </div>
                     <div class="funkyradio funkyradio-danger">
                         <input type="radio" name="Radio" id="Reprovado" value="Reprovado"  onclick="validaAjustar()"/>
                         <label for="Reprovado">Reprovado</label>
                     </div>
                
                
  
          </div>


          <div class="form-group col-md-2">

              <div class="funkyradio funkyradio-warning">
                  <input name="Radio" id="Ajustar" value="Ajustar" type="radio" onclick="validaAjustar()"/>
                  <label for="Ajustar">Ajustar</label>
              </div>
         

   </div>



<div class="form-group col-4" style="display: none" id="ajustarSolicitacao">
<label>Campo 1</label>
<input type="text" id="itCodigo" class="form-control">
</div>


<script>

 function validaAjustar(){
      if(document.getElementById('Ajustar').checked == true){
      
document.getElementById('ajustarSolicitacao').style.display = '';
     
      }
      if(document.getElementById('Ajustar').checked == false){
    document.getElementById('ajustarSolicitacao').style.display = 'none';
      }
    }







</script>

CSS

<!-- CSS Checkbox Aprovador -->

.funkyradio div {
	clear: both;
	overflow: hidden;
}
.funkyradio label {
	width: 100%;
	border-radius: 3px;
	border: 1px solid #D1D3D4;
	font-weight: normal;
}
.funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty {
	display: none;
}
.funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label {
	position: relative;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
	color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
	content: '\2714';
	text-indent: .9em;
	color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label {
	color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before, .funkyradio input[type="checkbox"]:checked ~ label:before {
	content: '\2714';
	text-indent: .9em;
	color: #333;
	background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before, .funkyradio input[type="checkbox"]:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before, .funkyradio-default input[type="checkbox"]:checked ~ label:before {
	color: #333;
	background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before, .funkyradio-primary input[type="checkbox"]:checked ~ label:before {
	color: #fff;
	background-color:...