Radio change input value Time

Question

I’m trying to get the selected radio to change the default value of an input time I checked that with javascript or jquery I can but I can’t do it the way I need to.

I have 3 Radio and 1 input time.

If the radio selected is output, it must contain the standard value 17:30 If the default value is entered it should be 08:00 in case of clearance should contain default value of 00:00 (this option should be blocked for change)

var campoHora = document.querySelector('input[type="time"]');
    case '1':
                document.getElementById( 'tipo' ).innerHTML = 'entrada';
                document.campoHora.value="10:00";
                break;
                case '2':
                document.getElementById( 'tipo' ).innerHTML = 'saida';
                document.campoHora.value= "12:00";
                break;

<div class="container"> <!-- 3 + 6 + 3 = 12 -->
    <div class="col-md-4"><font color="red">DATA</font>
    </br>
    <div id="campos">
    <input id="date" type="date">
    </div></div>
    <div class="col-md-4"><font color="red">SAÍDA/ENTRADA/FOLGA</font>
    <div id="time">
        <input type = "radio" name = "tipo" id="entrada" value = "entrada" style="margin-top:15px;"/> Entrada
        <input type = "radio" name = "tipo" id="saida" value = "saida" style="margin-top:15px;" /> Saída
        <input type = "radio" name = "tipo" id="folga" value = "folga" style="margin-top:15px;" /> Folga
    </div></div>
    <div class="col-md-4"><font color="red">Horas</font></br>
    <input id="time" name="time" type="time" value="" /></div>
</div>

Answer 1

A possible way to do this would be by using the method change of jQuery, as shown below:

jQuery(function($){
  $('.entradasaidafolga').change(function(){
     var campo = $(this).val();
     if (campo == "entrada"){	
         $("#horas").val('08:00');
         $("#horas").attr('readonly', false);
     }
     else if (campo == "saida"){	
         $("#horas").val('17:30');
         $("#horas").attr('readonly', false);
     } 
     else if (campo == "folga"){	
         $("#horas").val('00:00');
         $("#horas").attr('readonly', true);
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container"> 
    <div class="col-md-4"><font color="red">DATA</font>
    <br>
    <div id="campos">
       <input id="date" type="date">
    </div>
</div>
<div class="col-md-4"><font color="red">SAÍDA/ENTRADA/FOLGA</font>
    <div id="time">
        <input type = "radio" name = "tipo" class="entradasaidafolga" id="entrada" value = "entrada" style="margin-top:15px;"/> Entrada
        <input type = "radio" name = "tipo" class="entradasaidafolga" id="saida" value = "saida" style="margin-top:15px;" /> Saída
        <input type = "radio" name = "tipo" class="entradasaidafolga" id="folga" value = "folga" style="margin-top:15px;" /> Folga
    </div>
</div>
    <div class="col-md-4"><font color="red">Horas</font><br>
       <input id="horas" name="time" type="time" value="" />
    </div>
</div>