[SOLUCIONADO] Triple estado en CheckBox

[heinther]

Hola amigos,
llevo trabajando mucho tiempo en una web y me ha surgido un problema, a ver si me pueden ayudar.

Estoy creando una nueva sección dentro de la página en la que hay que seleccionar "cuadraditos" para dibujar un laberinto. En mi caso estoy utilizando checkbox como cuadraditos (con hoja de estilo los he puesto para que se vean colores).

Mi duda surge en que quiero que esos cuadrados tengan 3 estados.
1- Sin modificar, por defecto.
2- Modificado, que llevaría dibujado un camino del laberinto.
3- Modificado correcto, que llevaría dibujado el camino correcto del laberinto.

Lo estoy haciendo con el estado "indeterminate" del checkbox. Pero estoy teniendo muchos problemas para guardar los datos en la base de datos.

¿Cómo puedo hacer que al poner, por ejemplo, 4 cuadrados seguidos, el primero checkeado, el segundo indeterminado y el tercero y cuarto sin modificar, al darle al botón enviar, se envíen un 2, un 1 y dos 0 respectivamente?

Si conocen alguna otra forma de completar mi idea estoy totalmente abierto a cualquier sugerencia.

Muchas gracias de antemano.

[truman_truman]

podrías crear un campo hidden por cada checkbox y con el mismo atributo name , es decir que el hidden se llamará igual que el checkbox, a éste hidden le pones un valor por defecto, entonces al enviar los datos recibís ese valor y si esta checkeado recibirás el valor del checkbox... no se si resuelve tu problema pero te puede dar una idea pa solucionarlo.

[heinther]

Gracias por responder truman.
La verdad que no capto bien la idea que tratas de transmitirme.

En mi caso tengo un checkbox y un label para cada cuadrado (el label lo uso para dibujarlo y el checkbox para enviar la información).
Utilizo el name del checkbox para ver si se ha recibido información del formulario mediante la función isset y el value del checkbox para recibir el dato.

Por alguna razón, si sólo tengo un cuadrado todo lo recibo bien, pero en cuanto pongo dos ya me empieza a dar valores extraños.

Os dejo un ejemplo del código que tengo:

Código PHP:

       <?php
      if(isset($_POST['iniciar'])){
          $i=1;
          while($i<3){
              if(isset($_POST["option$i"])){
                  if($_POST["option$i"]=='2'){
                      echo $i."Está checkeado";
                  } elseif($_POST["option$i"]=='1') {
                      echo $i."Está indeterminado";
                  }
              } else {
                  echo $i."No se ha seleccionado";
              }
              $i++;
          }
          for($i=1;$i<3;$i++){
              if(isset($_POST["option$i"])){
                  if($_POST["option$i"]=='2'){
                      echo $i."Está checkeado";
                  } elseif($_POST["option$i"]=='1') {
                      echo "Está indeterminado";
                  }
              } else {
                  echo "No se ha seleccionado";
              }
          }
      }
      
      ?>
      
      
      <h1>Laberinto</h1>
      <form enctype='multipart/form-data' action="triple.php" method="post">
          <?php
          echo "<div class=a>";
          $fila = 1;
          while ($fila<3){
              echo '<input type="checkbox" name="option'.$fila.'" id="check'.$fila.'"';
              if (isset($_POST["option$fila"])){
                if($_POST["option$fila"]=='2'){       
                    echo "value ='2' checked ";
                } elseif($_POST["option$fila"]=='1'){       
                    echo "value ='1' ";
                }
              }
              echo " />";
              echo '<label for="check'.$fila.'"></label>';
              $fila++;
          }
          echo "</div>";
          ?>
 
      
          <input class="submit" type="submit" name="iniciar" value="Insertar Laberinto" />
      </form>  

Sigo buscando soluciones, si encuentro algo que me resuelva esto lo pondré por aquí por si alguien más le ha pasado o le pasa algún día.

[heinther]

Bueno, tras un poco de suerte he encontrado la solución que buscaba.
(Hay que utilizar javascript, y yo no sé apenas de ese lenguaje así que a base de prueba y error y varios temas de internet he dado con la solución)

Os dejo mi código por si a alguien le sirve algún día:

triple.php (página principal)

Código PHP:

         <?php
        if(isset($_POST['iniciar'])){
            echo "Hemos dado al formulario <br/>";
            
            for($i=1;$i<32;$i++){
            if(isset($_POST["option$i"])){
                echo $_POST["option$i"];
            } else {
                echo "0";
            }
            }
            
        }
        ?>
        <h1>Laberinto</h1>
        <form enctype='multipart/form-data' action="triple.php" method="post">
            <div class=a>
                <?php
                for($i=1;$i<32;$i++){
                 echo '<input type="checkbox" name="option'.$i.'" id="check'.$i.'" />';
                 echo '<label for="check'.$i.'"></label>';
                }
                ?>
            </div>
            <input class="submit" type="submit" name="iniciar" value="Insertar" />
        </form>
      
        <script src='javascript/jquery.min.js'></script>
        <script src="doblecheck.js"></script>  

doblecheck.js (parte de javascript)

Código Javascript:

var $check = $("input[type=checkbox]"),el;
 
$check
  .data('checked', 0)
  .click(function(e) {
 
    el = $(this);
 
    switch (el.data('checked')) {
 
        // indeterminate, going checked
      case 0:
        el.data('checked', 1);
        el.prop('indeterminate', false);
        el.prop('checked', true);
        el.val("1");
            
        break;
 
      // unchecked, going indeterminate
      case 1:
        el.data('checked', 2);
        el.prop('indeterminate', true);
        el.prop('checked', true);
        el.val("2");
        break;
 
        // checked, going unchecked
      default:
        el.data('checked', 0);
        el.prop('indeterminate', false);
        el.prop('checked', false);
        el.val("0");
 
    }
 
  });
 

Muchas gracias por responder igualmente truman_truman.