Hay diferentes maneras de ocultar o mostrar un input, un contenedor, una imagen o cualquier otro elemento.
En esta ocasión ocultaremos un input usando jQuery y un input[checkbox] será el trigger.
Agregando HTML
Agregamos la etiqueta input[text] que es la que vamos mostar/ocualtar y el input checkbox.
<input type="checkbox" id="mostrar-ocultar-input">
<label for="mostrar-ocultar-input">ocultar input?</label>
<input type="text" class="input-text">
Mostrar/ocultar input
$(document).ready(function () {
let campoInput = $('.input-text');
$("#mostrar-ocultar-input").change(function () {
if ($(this).is(':checked')) {
campoInput.hide();
} else {
campoInput.show();
}
});
});
Resultado
Juntamos el ejemplo anterior y veremos el resultado. Le agregue un poco de Bootstrap para que se vea mejor
See the Pen Untitled by Alam (@alamdtech) on CodePen.
Como podrán ver es un ejercicio sencillo y son pocas líneas de código, esto lo puedes implementar en cualquier proyecto y adaptarlo a tus necesidades, como agregar más validaciones o funcionalidades.
Espero te haya sido de ayuda, si tienes alguna pregunta o duda escribe un comentario en la parte inferior y trataré de responder lo antes posible.