1

Tengo un listado de checkbox, los cuales se cargan dinamicamente y lo que estoy intentando hacer es recoger los valores de los checks seleccionados y cuando pulse al botón de siguiente, en la siguiente ventana, la cual está en el mismo HTML, mostrar los valores de los checks seleccionados

HTML

<tbody>
    <tr>
        <td>
            <input type="checkbox" id="especie0" name="especie" value="1" onchange="GetCheckedVal()" onclick="desactivar()">
            <label for="especie0" class="ckbox ckbox-success pos-left-10">Sea bass/Dicentrarchus labrax</label>
            <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies0" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
            <input type="number" id="precio0" name="price" value=" " readonly="readonly" class="total-oculto">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="especie1" name="especie" value="6" onchange="GetCheckedVal()" onclick="desactivar()">
            <label for="especie1" class="ckbox ckbox-success pos-left-10">Sea bream/Sparus aurata</label>
            <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies1" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
            <input type="number" id="precio1" name="price" value=" " readonly="readonly" class="total-oculto">
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" id="especie2" name="especie" value="7" onchange="GetCheckedVal()" onclick="desactivar()">
            <label for="especie2" class="ckbox ckbox-success pos-left-10">Oyster/Crassostrea gigas</label>
            <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies2" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
            <input type="number" id="precio2" name="price" value=" " readonly="readonly" class="total-oculto">
        </td>
    </tr>
</tbody>

Este es el HTML de los checkbox.

Javascript

function GetCheckedVal() {
    //alert('entra funcion GetCheckedVal')

    $('#myDiv_especie').change(function() {
        var valuesChecked = []; {
            $('#myDiv_especie :checked').each(function() {
                //if(valuesChecked.indexOf($(this).val()) === -1){
                valuesChecked.push($(this).val());
                // }
            });
            console.log(valuesChecked);
        }
    });
}

Tengo esta función JS la cual recoge en un array todos los valores de los inputs de los checkbox que he seleccionado, es decir, si en la ventana anterior he seleccionado por ej. el check 1, 3 y 5

Lo que no sé es cómo montar la función correspondiente para recoger los valores de los checbox seleccionados y mostrarlos en la siguiente ventana, que me imagino que sería hacer un bucle viendo cual está y cual no seleccionado y de ahi pintarlos por ventana.

4
  • 1
    Con Javascript puedes recoger los valores de los checkbox antes de que muestres la siguiente ventana para luego hacer lo que necesites en ella. En Jquery existe la función is() que podrías usar haciendo algo como: if ($(elemento).is(':checked')) {
    – phpMyGuel
    el 24 jun. 2019 a las 9:18
  • 1
    con la función js que he puesto, si no me he equivocado, me recoge los values de los checkbox en un array. Podría hacer algo con esta función para que luego me pinte los valores en la siguiente ventana?
    – derek
    el 24 jun. 2019 a las 9:28
  • 1
    Cuando dices "siguiente ventana en el mismo html" ¿Te refieres a que parte del contenido esta oculto y lo que haces es mostrar el contenido oculto y ocultar este?
    – x3k
    el 24 jun. 2019 a las 9:32
  • 1
    Sí, tengo este formulario con los check y un section oculto, el cual se muestra cuando pulso el botón siguiente y se oculta el form de los checkbox
    – derek
    el 24 jun. 2019 a las 9:38

1 respuesta 1

1

No hace falta que los guardes en un array, ni que hagas un bucle para recorrer ese array.

Ya estas haciendo el bucle con el .each() de jQuery, por lo que los puedes imprimir en ese mismo bucle usando .append() para que no se pisen los anteriores que ya has pintado:

function GetCheckedVal() {
    $("#resultados").html("");
    $("input[type='checkbox'][name='especie']:checked").each(function() {
         $("#resultados").append($(this).val()+" - "+$("label[for='"+$(this).attr("id")+"']").text()+"<br>");
    });
}

He creado un div con id="resultados" que es donde se imprimen los checkbox seleccionados en tu caso será ese contenedor que tienes oculto.

Te recomiendo tambien que lo ejecutes en el click del boton antes de hacer el .show() del contenedor oculto, para que no se ejecute la función cada vez que se selecciona o des-selecciona un check.

function GetCheckedVal() {
    $("#resultados").html("");
    $("input[type='checkbox'][name='especie']:checked").each(function() {
         $("#resultados").append(($(this).val()*$(this).parent().children('input[name="cantSpecies"]').val())+" - "+$("label[for='"+$(this).attr("id")+"']").text()+"<br>");
    });
    $("#resultados, table").toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
      <tr>
          <td>
              <input type="checkbox" id="especie0" name="especie" value="1">
              <label for="especie0" class="ckbox ckbox-success pos-left-10">Sea bass/Dicentrarchus labrax</label>
              <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies0" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
              <input type="number" id="precio0" name="price" value=" " readonly="readonly" class="total-oculto">
          </td>
      </tr>
      <tr>
          <td>
              <input type="checkbox" id="especie1" name="especie" value="6">
              <label for="especie1" class="ckbox ckbox-success pos-left-10">Sea bream/Sparus aurata</label>
              <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies1" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
              <input type="number" id="precio1" name="price" value=" " readonly="readonly" class="total-oculto">
          </td>
      </tr>
      <tr>
          <td>
              <input type="checkbox" id="especie2" name="especie" value="7">
              <label for="especie2" class="ckbox ckbox-success pos-left-10">Oyster/Crassostrea gigas</label>
              <input type="number" min="1" max="99" maxlength="2" value="" id="cantSpecies2" name="cantSpecies" class="cantEspecies" disabled="disabled" onchange="multi()">
              <input type="number" id="precio2" name="price" value=" " readonly="readonly" class="total-oculto">
          </td>
      </tr>
  </tbody
</table>

<button id="siguienteBtn" onclick="GetCheckedVal()">Siguiente</button>
<div id="resultados" style="display:none;"></div>

4
  • me aparece bien el label del check seleccionado y estoy intentando pasar también el value del último input, es decir, el input de precio <input type="number" id="precio0" name="price" value=" " readonly="readonly" class="total-oculto"> el cual es el resultado de multiplicar el precio por la cantidad seleccionada en el input "cantSpecies0" el cual está guardado en la variable total en una función, pero cuando la llamo no me pilla el valor, sino que me pilla el valor asignado desde el principio, ya que está declarada fuera
    – derek
    el 24 jun. 2019 a las 11:30
  • @derek en el append$("#resultados").append(($(this).val()*$(this).parent().children('input[name="cantSpecies"]').val())+" - "+$("label[for='"+$(this).attr("id")+"']").text()+"<br>");. He cambiado $(this).val() por ($(this).val()*$(this).parent().children('input[name="cantSpecies"]').val())
    – x3k
    el 24 jun. 2019 a las 11:39
  • $("#myDiv_compra").append($(this).val() + " - " + $("label[for='" + $(this).attr("id") + "']").text() + ' ' + total + "<br>"); esta es la línea de código que estoy modificando, pero el total me aparece siempre vacío en vez de pillarme el value del input
    – derek
    el 24 jun. 2019 a las 11:40
  • ¿Por que no calculas el total en ese punto? Dentro del .each() .
    – x3k
    el 24 jun. 2019 a las 11:47

Tu Respuesta

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

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