Show input field depending on radio button selection

Question

In a form, you will have the yes or no option, if yes the user will describe

$(document).ready(function() {
  $('#descreva').hide();
  $('#def').change(function() {
    if ($('#sim') checked) {
        if( $("#sim").is(":checked") == true)
        $('#descreva').show();
    } else {
      $('#descreva').hide();
    }
  });
});

            <div class="campo">
            <label><strong>Possui treinamento: </strong></label>
            <script type="text/javascript" src="java.js"></script>
            <radio id="def">
            <div>
              <input type="radio" name="devweb" id="sim" value="sim">
              <label for="sim">SIM</label>
            </div>
            <div>
              <input type="radio" name="devweb" id="nao" value="nao">
              <label for="nao">NÃO</label>
            </div>
            <div>
            <input type="text" name="descreva" id="descreva">
            </div>

Answer 1

Something simple to do this is using pure javascript even:

window.onload = () => {
   var input = document.getElementById('descreva');
   var radio_yes = document.getElementById('sim');
   var radio_no = document.getElementById('nao');
    radio_yes.addEventListener('click', (e) => {
        var radio = e.currentTarget;
        if(radio.checked == true) {
          input.disabled=false;
          input.focus();
        } else {
         input.disabled=true;
          input.value='';
        }
    });
    
     radio_no.addEventListener('click', (e) => {
        var radio = e.currentTarget;
        if(radio.checked == true) {
          input.value='';
          input.disabled=true;
           input.focus();
        } else {
         input.disabled=false;
        }
    });
}

Follows model in fiddle

Answer 2

You need to study html and javascript more, because there are many simple problems in the code:

• <radio id="def"> there is no "radio" element, except that the way it was defined would still lack the closure of this tag
• if ($('#sim') checked) if not felt, the $('#sim') will get the element with id="yes", from the most you could do was for example do == null or != null, etc, because it is a selector for the element, to validate whether it is "checked", you should do for example $('#sim').is(':checked').
• a radio buttom has multiple values, hence the last of it in being able to "choose one among several values", and this happens because opinions have the same "name", so an easier way to select is using: $('input:radio[name="devweb"]').
  With that, you can watch the event change to all radio with the same name, and can still use to pick which value was selected, for example $('input:radio[name="devweb"]').val().

Below is an example of how to use this:

$(document).ready(function() {
  $('#descreva').hide();
  // aqui um seletor por name, para pegar todos os radio buttons "devweb"
  $('input:radio[name="devweb"]').change(function() {
    // aqui, this é o radio quem foi clicado, então basta comparar o valor com val()
    if ($(this).val() == "sim") {
        $('#descreva').show();
    } else {
      $('#descreva').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="campo">
    <label><strong>Possui treinamento: </strong></label>
    <!-- removi o elemento "radio" que fato não existe -->
    <div>
      <input type="radio" name="devweb" id="sim" value="sim">
      <label for="sim">SIM</label>
    </div>
    <div>
      <input type="radio" name="devweb" id="nao" value="nao">
      <label for="nao">NÃO</label>
    </div>
    <div>
    <input type="text" name="descreva" id="descreva">
</div>