Creé un formulario para el registro de usuarios, pero el formulario mostrará u ocultará un campo adicional si el usuario elige uno de ellos.
tengo este campo:
<div class="form-group row" style="display:none"> <label for="spec" class="col-md-4 col-form-label text-md-right"> {{ __('spec') }} </label> <div class="col-md-6"> <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value="{{ old('spec') }}" autocomplete="spec" autofocus> @error('spec') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div>que está oculto por defecto
y tengo estas entradas de radio:
<div> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </div>por lo tanto, si el usuario eligió la primera radio, se ocultará el primer campo (especificación) y si el usuario eligió la segunda radio, el campo (especificación) ya no se ocultará.
¿Cómo lograr esto usando la declaración if?
Estoy mayormente de acuerdo con el comentario de Devsi Odedra. Sería más fácil y le daría más flexibilidad para usar Javascript, pero no es necesario. Hay una solución usando solo CSS.
Para usar CSS, solo el código HTML debe ser, por lo que el div que debe ocultarse o mostrarse debe ser un "hermano menor" de la input . En otras palabras, el div debe colocarse al mismo nivel y después de la input (no es necesario que esté directamente después). De esta manera, podrá combinar el selector general de hermanos y el selector de pseudoclase :checked
.show-only-if-css-is-checked { display: none; } #css:checked ~ .show-only-if-css-is-checked { display: block; } <div> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> <div class="show-only-if-css-is-checked form-group row"> <label for="spec" class="col-md-4 col-form-label text-md-right"> {{ __('spec') }} </label> <div class="col-md-6"> <input id="spec" type="text" class="form-control @error('spec') is-invalid @enderror" name="spec" value="{{ old('spec') }}" autocomplete="spec" autofocus> @error('spec') <span class="invalid-feedback" role="alert"> <strong>{{ $message }}</strong> </span> @enderror </div> </div> </div>La parte CSS puede ser incluso más corta
#css:not(:checked) ~ .show-only-if-css-is-checked { display: none; }EDITAR: Tuve la tentación de eliminar la etiqueta laravel de la pregunta, pero lo que estás tratando de lograr también se puede hacer con Laravel livewire