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):
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.
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)"
. ModificasmostrarOcultar
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});