Mi título puede ser un poco confuso... Este es mi primer intento (nunca) para una aplicación web y obtuve la siguiente solución para un conjunto de casillas de verificación, creadas dentro de una plantilla html para FastAPI y con Jinja2.
{% for name in names %} <input type="checkbox" id='{"box": "a", "name_id": "{{name.id}}"}' onchange=submit_me(this)> <input type="checkbox" id='{"box": "b", "name_id": "{{name.id}}"}' onchange=submit_me(this)> {% endfor %} <script> function submit_me(box){ data = JSON.parse(box.id) data["checked"] = box.checked fetch("/test", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) }) } </script>Este es solo un ejemplo simple de un código más complejo, pero muestra mi solución (sin experiencia) para el problema de obtener el cuadro ("a" o "b"), así como el nombre (iteración de nombres a través de jinja) dentro de mi función. Me preguntaba si esta es realmente una opción válida o si existe un enfoque mucho más "estándar" para esto.
Esta es, por cierto, solo la solución "rápida y sucia" porque no pude llamar a una función de python a través de jinja y FastAPI directamente (html -> backend de python -> base de datos)
Esto no es para lo que se debe usar la id de un elemento. Si necesita adjuntar datos aleatorios a un elemento, use los atributos de data- . los elementos input tienen el atributo de name y el atributo de value que deben usarse para describir el valor y el valor real. No es necesario rellenar JSON dentro de la id (que debería ser un identificador único para un elemento en un documento).
Enviar datos marcando una casilla de verificación también parece incorrecto ( generalmente , depende de su caso de uso): use un elemento de form si tiene datos que desea enviar y envíe cuando se haga clic en un botón.
Dado que tiene valores codificados (a, b), usar la iteración también parece un poco extraño:
<input type="checkbox" name="box_a" id="box-a" value="{{ names[0].id }}" onchange="submit_me(this);"> <input type="checkbox" name="box_b" id="box-b" value="{{ names[1].id }}" onchange="submit_me(this);"> Sin embargo, si tiene a / b almacenado dentro de su objeto de name , use la iteración y tenga un solo elemento donde complete la información según sea necesario en la etiqueta:
<input type="checkbox" name="box_{{ name.key }}" id="box-{{ name.key }}" value="{{ name.id }}" onchange="submit_me(this);">