0

Estoy realizando una página que permite a un grupo de personas puedan pedir unas fichas con información de productos. Para esto, quiero hacer un modo de "añadir al carrito".

Hay un <input type="checkbox"> y un <details> que me servirá como el "seleccionar todo" de la información dentro del <details>

Aquí está el código:

//Primero buscamos todos los input que esten dentro de summay y que sean de primer nivel
var chck_padre = document.querySelectorAll("summary>input");
//Si chck_padre existe y no esta null,  entonces entramos
if(chck_padre != undefined && chck_padre != null)
  {
  //Ahora recorremos el arreglo de los padres
  chck_padre.forEach(function (elemento){
    //Asignamos un elemento click a cada elemento checkbox padre
    elemento.onclick = function (){
    ///Ahora siendo una base tu input padre, entonces subimos dos niveles para encontrar a details y apartir de details buscar los elementos hijos checkbox
    var details = elemento.parentElement.parentElement;
    //ahora buscamos los chckbox hijos que estan dentro de deatils
    var chckbox = details.querySelectorAll("input[type='checkbox'][name^='check']");
    //Recorremos estos checkbox hijos
    chckbox.forEach(function (chck_hijo){
        //Verificamos si nuestro elemento padre llamado: elemento esta checked true ó false y le deamos el mismo estado; true o false.
        elemento.checked ? (chck_hijo.checked = true) : (chck_hijo.checked = false);
    }); //Fin chckbox forEach
  } //Fin onclick function 
}); // Fin chck_padre forEach
}

<!-- language: lang-html -->

<section id="muestreo">
    <?php
    //Aquí se consulta el programa que será el primer <details>
    $programas=mysqli_query($mysqli, "SELECT * FROM programas");
    while ($prog=mysqli_fetch_array($programas)) {
        //Aquí inicia el primer <details>, que será el que se muestre como principal.
        echo "<details class='programa'>";
        //El título, serán todos los programas registrados.
        echo "<summary>";
        echo $prog['nombre_prog'];
        //Este $id es para delimitar aún más los productos.
        $id=$prog['id_prog'];
        echo "</summary>";
        //Aquí se consultan las categorías que pertenecen al programa de arriba.
        $productos=mysqli_query($mysqli, "SELECT * FROM productos GROUP BY sub_categoria_prod WHERE id_prog='$id'");
        while($prod=mysqli_fetch_array($productos)){
            //Este es el segundo <details> que se mostrará al hacer click en el nombre del programa consultado arriba.
            echo "<details class='hijo'>";
            //El título aquí, será la sub_categoría a la que pertenecen varios productos.
            echo "<summary>";
            //Este input será el "seleccionar todo".
            echo "<input type='checkbox' name='check1'>";
            echo $prod['sub_categoria_prod'];
            echo "</summary>";
            //Aquí se define la sub-categoría para delimitar la infomación y dividirlos en grupos.
            $categoria=$prod['sub_categoria_prod'];
            //El $id se repite para delimitar la información a mostrar.
            $id=$prog['id_prog'];
            //Aquí se consulta la información de las fichas que pertenecen a la sub-categoría mostrada.
            $informacion=mysqli_query($mysqli, "SELECT * FROM productos WHERE sub_categoria_prod='$categoria' AND id_prog='$id'");
            while ($i=mysqli_fetch_array($informacion)) {
                //Este input es para poder elegir la ficha exacta que se necesita pedir.
                echo "<input type='checkbox' name='check1' class='id' value='" . $i['cod_prod'] . "'>";
                echo "<table border='1'class='tabla'>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre del producto (SIBOL).</th>";
                echo "<td class='generalidades'><strong>" . $i['sibol_prod'] . "</strong></td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Nombre comercial del producto.</th>";
                echo "<td class='generalidades'>" . $i['nombre_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Calidad.</th>";
                echo "<td class='generalidades'>" . $i['calidad_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Generalidades.</th>";
                echo "<td class='generalidades'>" . $i['generalidades_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos generales.</th>";
                echo "<td class='generalidades'>" . $i['re_generales_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Requisitos espec&iacute;ficos.</th>";
                echo "<td class='generalidades'>" . $i['re_espe_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Empaque y rotulado.</th>";
                echo "<td class='generalidades'>" . $i['empaque_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Presentaci&oacute;n.</th>";
                echo "<td class='generalidades'>" . $i['presentacion_prod'] . "</td>";
                echo "</tr>";
                echo "<tr>";
                echo "<th class='titulos'>Imagen de referencia.</th>";
                echo "<td class='generalidades'><img src='" . $i['imagen_prod'] . "' id='referencia'></td>";
                echo "</tr>";
                echo "</table>";
            }
            //Termina el <details> de las sub categorías.
            echo "</details>";
        }
        //Termina el <details> de los programas.
        echo "</details>";
    }
    ?>
</section>

Sé que es extenso, pero ya no sé qué más hacer. Por favor, necesito que al seleccionar el input que está en la clase "hijos" me seleccione las fichas que pertenecen sólo a la sub-categoría que fue seleccionada en el checkbox.

3
  • ¿Valdría una respuesta usando JQuery?
    – Fly
    el 19 feb. 2019 a las 23:35
  • En este punto, cualquier cosa me sirve. Jajajajaja. Es lo único que me falta para entregarlo.
    – Saco04
    el 19 feb. 2019 a las 23:39
  • te sugiero que primero cargues la parte html/php y en la parte inferior venga o agregues tu codigo javascript el 20 feb. 2019 a las 18:43

1 respuesta 1

0

Solo cambia el orden, primero que se ejecute el PHP y posteriormente que se ejecute el Javascript, además agrega esto en tu Javascript:

window.onload = function() { //Se ejecutara el Javascript hasta que la página se cargue por completo
   //Pega aquí todo el código Javascript
};

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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