1

No encuentro como imprimir el valor tipo time que seleccioné, en todos los td que se generan con la lista, cuando le doy a seleccionar, se seleccionan todo los checkbox como quiero pero sólo en el primer input se me imprime la fecha que seleccioné, la función que uso es:

function toggle(source) {
  var fecha = document.getElementById("desde_fijo").value;
  checkboxes = document.getElementsByName("myCheck");

  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
    console.log(fecha);
    if (("checked", true)) {
      document.getElementById(
        "input_control_hora_inicio"
      ).value = document.getElementById("desde_fijo").value;
    }
  }
}

Y los input son los siguientes primero el que selecciono la hora y luego donde requiero se imprima:

<th class="text-center th_yura_green" style="border-color: white; border-radius:  18px 0 0 0">
  <input type="checkbox" id="myCheck" name="myCheck" onchange="toggle(this)" />
</th>
<th class="text-center th_yura_green" style="border-color: white;">Inicio
  <input class="text-center" type="time" style="width:100%;  color:#00b388" id="desde_fijo" name="desde_fijo">
</th>
<td class="text-center" style="border-color: #9d9d9d">
  <input class="text-center" type="time" style="width:100%" id="input_control_hora_inicio" name="input_control_hora_inicio">
</td>

imagen: formulario

2
  • Todos las filas (<tr>) tienen los mismos identificadores en input type="checkbox" y input class="text-center"?
    – milmal
    Commented el 18 ene. 2021 a las 7:44
  • Si @milmal todas las filas tienen los mismos identificadores! Commented el 18 ene. 2021 a las 11:28

1 respuesta 1

0

Se supone que las identificaciones son únicas. Entonces se espera que solo cambie la primera instancia con la identificación.

Si te he entendido bien, establecería un onChange evento en <input type="time">. Luego podrá verificar cuántas casillas de verificación desea y agregar un tiempo que se establecerá en todas las entradas con el nombre de clase de inicio.

const checkbox = document.getElementsByClassName("checkbox");
const inicio = document.getElementsByClassName("inicio");

function agregarTiempo(source) {
  if (source.value) {
    Object.keys(inicio).forEach((i) => {
      if (checkbox[i].checked) {
        inicio[i].value = source.value;
      }
    });
  }
}
<table id="table">
  <tr>
    <th class="text-center th_yura_green" style="border-color: white; border-radius: 18px 0 0 0;">
      <input type="checkbox" class="checkbox" name="myCheck" value="0" />
    </th>
    <th class="text-center th_yura_green" style="border-color: white;">
      Inicio
      <input class="inicio text-center" type="time" style="width: 100%; color: #00b388;" name="desde_fijo" onchange="agregarTiempo(this)" />
    </th>
    <td class="text-center" style="border-color: #9d9d9d;">
      <input class="text-center" type="time" style="width: 100%;" name="input_control_hora_inicio" />
    </td>
  </tr>
  <tr>
    <th class="text-center th_yura_green" style="border-color: white; border-radius: 18px 0 0 0;">
      <input type="checkbox" class="checkbox" name="myCheck" value="1" />
    </th>
    <th class="text-center th_yura_green" style="border-color: white;">
      Inicio
      <input class="inicio text-center" type="time" style="width: 100%; color: #00b388;" name="desde_fijo" onchange="agregarTiempo(this)" />
    </th>
    <td class="text-center" style="border-color: #9d9d9d;">
      <input class="text-center" type="time" style="width: 100%;" name="input_control_hora_inicio" />
    </td>
  </tr>
  <tr>
    <th class="text-center th_yura_green" style="border-color: white; border-radius: 18px 0 0 0;">
      <input type="checkbox" class="checkbox" name="myCheck" value="2" />
    </th>
    <th class="text-center th_yura_green" style="border-color: white;">
      Inicio
      <input class="inicio text-center" type="time" style="width: 100%; color: #00b388;" name="desde_fijo" onchange="agregarTiempo(this)" />
    </th>
    <td class="text-center" style="border-color: #9d9d9d;">
      <input class="text-center" type="time" style="width: 100%;" name="input_control_hora_inicio" />
    </td>
  </tr>
</table>

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.