1

Tengo un formulario que me muestra todos los valores de un array (llamados documentos) en forma de checkbox, en paralelo le agrego un input tipo texto el cual está relacionado a cada check, de la siguiente forma:

<div class="row">
<div class="col-md-12">
    {!! Form::label('documentos', 'Documentos') !!}
    @foreach ($documentos as $documento)
        <div class="checkbox" onchange="javascript:mostrarOcultar()">
            <label class="col-form-label">
                {!! Form::checkbox("documento[{$documento->id}]", $documento->id, null,
                    ['class' => 'field check']) !!}
                {{ $documento->nombre }}
            </label>
            <label >
                {!! Form::text("details[{$documento->id}]", null,
                    ['class' => 'form-control details',
                    'style' => 'display: none; ',
                    'placeholder' => 'Detalles',
                    'title' => 'OPCIONAL : Ingrese una especificación del documento.'])
                !!}
            </label>
        </div>
    @endforeach
</div>

necesito que al momento de pinchar algun check, este habilite o muestre su correspondiente input/texto, he intentado usar javascript para hacer la función, capturando los valores por el nombre de clase:

<script type="text/javascript">
            function mostrarOcultar()
            {
                detalle = document.getElementsByClassName('form-control details');
                check = document.getElementsByClassName('field check');

                detalle.style.display = check.checked ? 'block' : 'none';
            }
        </script>

sin embargo no consigo lograrlo. Luego intenté rescatar los valores por id (le asigno una id para los check y para los text):

<script type="text/javascript">
            function mostrarOcultar()
            {
                detalle = document.getElementById('details');
                check = document.getElementById('check');

                detalle.style.display = check.checked ? 'block' : 'none';
            }
        </script>

Al probar, funciona, pero solo con el primer elemento del array y no con todos los demas que pueden ser muchos mas, dependiendo de cuantos se vayan agregando (además, creo que puede haber un problema de incongruencia de datos al repetir la id para todos los inputs):

![introducir la descripción de la imagen aquí

Agradezco que se hayan tomado el tiempo de leer y ojalá pudieran ayudarme.


ACTUALIZO:

Tomando en consideración los comentarios, he modificado los id de los check y de los text:

<div class="row">
<div class="col-md-12">
    {!! Form::label('documentos', 'Documentos') !!}
    @foreach ($documentos as $documento)
        <div class="checkbox" onchange="javascript:mostrarOcultar()">
            <label class="col-form-label">
                {!! Form::checkbox("documento[{$documento->id}]", $documento->id, null,
                    ['class' => 'field', 'id' => "doc[{$documento->id}]"]) !!}
                {{ $documento->nombre }}
            </label>
            <label>
                {!! Form::text("details[{$documento->id}]", null,
                    ['class' => 'form-control',
                    'id' => "det[{$documento->id}]",
                    'style' => 'display: none; ',
                    'placeholder' => 'Detalles',
                    'title' => 'OPCIONAL : Ingrese una especificación del documento.'])
                !!}
            </label>
            <script>
                function mostrarOcultar() {
                    var detalle = document.getElementById('det[{{$documento->id}}]');
                    var check   = document.getElementById('doc[{{$documento->id}}]');

                    if (check.checked) {
                        detalle.style.display = 'block';
                    } else{
                        detalle.style.display = 'none';
                    }
                }
                </script>
        </div>
    @endforeach
</div>

Como podrán ver, la id si bien comparten el valor del checkbox (documento), las diferencio con un prefijo para cada uno (doc[ ]; det[ ]), de esa manera logro relacionar ambos inputs, sin embargo, no hace nada. les muestro como se ve el codigo en ejecución:

<div class="checkbox" onchange="javascript:mostrarOcultar()">
            <label class="col-form-label">
                <input class="field" id="doc[6]" name="documento[6]" type="checkbox" value="6">
                Cartas
            </label>
            <label>
                <input class="form-control" id="det[6]" style="display: none; " placeholder="Detalles" title="OPCIONAL : Ingrese una especificación del documento." name="details[6]" type="text">
            </label>
            <script>
                function mostrarOcultar() {
                    var detalle = document.getElementById('det[6]');
                    var check   = document.getElementById('doc[6]');

                    if (check.checked) {
                        detalle.style.display = 'block';
                    } else{
                        detalle.style.display = 'none';
                    }
                }
                </script>
        </div>
                <div class="checkbox" onchange="javascript:mostrarOcultar()">
            <label class="col-form-label">
                <input class="field" id="doc[4]" name="documento[4]" type="checkbox" value="4">
                DAU
            </label>
            <label>
                <input class="form-control" id="det[4]" style="display: none; " placeholder="Detalles" title="OPCIONAL : Ingrese una especificación del documento." name="details[4]" type="text">
            </label>
            <script>
                function mostrarOcultar() {
                    var detalle = document.getElementById('det[4]');
                    var check   = document.getElementById('doc[4]');

                    if (check.checked) {
                        detalle.style.display = 'block';
                    } else{
                        detalle.style.display = 'none';
                    }
                }
                </script>
        </div>

Esos son ejemplos de dos documentos diferentes, pero la función no afecta a ninguno, tampoco genera errores, ¿alguien puede identificar la razón?

PD: si les asigno otro id como se mostró al principio de la pregunta, funciona y eso que mantiene la misma lógica que el código modificado.

7
  • que diferencia el primer check box del segundo checkbox y tambien que diferencia el primer y el segundo input??? debes adjuntar el html javascript no hace las cosas solo...
    – user46896
    Commented el 20 ago. 2021 a las 14:10
  • otro dato esto no tiene que ver con php ...
    – user46896
    Commented el 20 ago. 2021 a las 14:10
  • @FranciscoNúñez-TodoPoderoso se supone que están diferenciados por su valor, a cada check le asigno como valor el id de "documentos" pero por lo mismo tenia la duda si usar un id para hacer la funcion con js. Estoy usando php para extraer dichos valores, por eso puse la etiquieta, creyendo que se podia rescatar los valores mediante variables de php Commented el 20 ago. 2021 a las 14:36
  • Puedes intentar ponerle un id a cada tag de los input de texto basado en el correspondiente documento->id, algo como: "detail_[{$documento->id}]". En el onchange de cada check puedes pasar el "id" del documento para diferenciarlos -> onchange="javascript:mostrarOcultar($documento->id)". Modificas mostrarOcultar para recibir el id del documento -> function mostrarOcultar(docId).Con esto tal vez puedas buscar por id cada input en la función mostrarOcultar -> detalle = document.getElementById(details_${docId}); Commented el 20 ago. 2021 a las 14:59
  • @EduardoHernández muchas gracias estimado, que tenga buen día:) Commented el 20 ago. 2021 a las 15:43

1 respuesta 1

2

Te sugiero hacer las cosas de la forma más sencilla posible, no es necesario asignar ID a los elementos y, de hecho, tampoco usar el índice para encontrar el relacionado. Así como tampoco es necesario (ni conveniente) la función para escuchar cambios en la etiqueta del div, puedes hacerlo desde el contenedor de todos estos elementos o, incluso, desde el cuerpo del documento.

<div class="row">
<div class="col-md-12">
    {!! Form::label('documentos', 'Documentos') !!}
    @foreach ($documentos as $documento)
        <div class="checkbox">
            <label class="col-form-label">
                {!! Form::checkbox("documento[{$documento->id}]", $documento->id, null,
                    ['class' => 'field check']) !!}
                {{ $documento->nombre }}
            </label>
            <label >
                {!! Form::text("details[{$documento->id}]", null,
                    ['class' => 'form-control details',
                    'style' => 'display: none; ',
                    'placeholder' => 'Detalles',
                    'title' => 'OPCIONAL : Ingrese una especificación del documento.'])
                !!}
            </label>
        </div>
    @endforeach
</div>

Tratando de crear un ejemplo funcional:

  • Cuando se modifique un campo se va a ejecutar la función donde analizas qué fue lo que cambió para saber las acciones a realizar
  • Si el cambio fue en un checkbox:
    • Obtienes el padre con .closest()
    • Desde el padre puedes acceder al campo de texto con un simple .querySelector()
    • Muestras u ocultas el campo de acuerdo al estado del checkbox

// Escuchar cambios en cuerpo de documento
document.body.addEventListener('change', e => {
    // ¿Se modificó un checkbox? buscar por nombre
    if(e.target.name.indexOf('documento') == 0) {
        // Ejecutar función para realizar operaciones
        documentCheck(e.target);
    }
    // ¿Necesitas hacer algo cuando se modifique un campo de detalles?
    else if(e.target.name.indexOf('details') == 0) {
        // Crea otra función, aquí solo se muestra en consola
        console.log(e.target);
    }
});

// Aquí se recibe solo el checkbox
function documentCheck(check) {
    // Se puede encontrar el padre con closest y selector CSS
    let div = check.closest('div.checkbox');
    // Buscar input por nombre (^ quiere decir que "inicia con"), desde el padre
    let text = div.querySelector('input[name^="details"]');
    // Determinar si mostrar u ocultar
    let display = (check.checked) ? 'inline-block' : 'none';
    // Asignar estilo
    text.style.display = display;
}
<div class="row">
    <div class="col-md-12">
         <label>Documentos</label>

             <div class="checkbox">
                <label class="col-form-label">
                    <input type="checkbox" name="documento[5]" value="5"> Documento 5
                </label>
                <label >
                    <input type="text" name="details[5]" class="form-control details" style="display:none;" placeholder="Detalles" value="">
                </label>
            </div>

             <div class="checkbox">
                <label class="col-form-label">
                    <input type="checkbox" name="documento[3]" value="3"> Documento 3
                </label>
                <label >
                    <input type="text" name="details[3]" class="form-control details" style="display:none;" placeholder="Detalles" value="">
                </label>
            </div>

             <div class="checkbox">
                <label class="col-form-label">
                    <input type="checkbox" name="documento[10]" value="10"> Documento 10
                </label>
                <label >
                    <input type="text" name="details[10]" class="form-control details" style="display:none;" placeholder="Detalles" value="">
                </label>
            </div>

    </div>
</div>

1
  • wow amigo muchisimas gracias!! mis respetos hacia usted, no es primera vez que me ayuda así que muchas gracias, que tenga un buen día!😁🙏 Commented el 20 ago. 2021 a las 18:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.