Estoy creando un sitio web y aprendiendo AlpineJS. Estoy tratando de hacer una 'casilla de verificación' personalizada (de tailwindcss) para que las personas acepten los Términos de servicio.

 <div class="flex-shrink-0"> <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" --> <button x-show="!isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false"> <span class="sr-only">Agree to policies</span> <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> <span aria-hidden="true"></span> </button> <button x-show="isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false"> <span class="sr-only">Agree to policies</span> <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> <span aria-hidden="true"></span> </button> </div>

Ahora probablemente ya haya una mejor manera de hacer esta casilla de verificación personalizada porque ahora estoy reemplazando la casilla de verificación completa cuando hace clic en ella. Entonces, si tiene consejos para eso, ¡hágamelo saber!

Con matraz necesito obtener el valor de esta casilla de verificación. Pero como no es una casilla de verificación real, no puedo simplemente obtener los datos a través de la solicitud POST. Entonces pensé que podría usar un oculto para analizar los datos con la solicitud POST.

<input type="hidden" name="terms" value="">

Quiero que el valor en sea 'verdadero' o 'falso' para poder hacer cosas con eso en mi código. Parece que no puedo encontrar una buena solución en ningún lugar en línea, pero estoy seguro de que es una. ¿Alguien tiene alguna idea?