使用 AlpineJS 更改 <input> 值

Question

我正在制作网站并学习 AlpineJS。我正在尝试自定义 'checkbox'（来自 tailwindcss）让人们同意服务条款。

<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>

现在可能已经有更好的方法来执行此自定义复选框，因为现在我将在您单击它时替换整个复选框。所以如果你有这方面的建议，请告诉我！

对于 flask，我需要获取此复选框的值。但由于它不是真正的复选框，我不能只通过 POST 请求获取数据。所以我想我可以使用隐藏来解析带有 POST 请求的数据。

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

我希望其中的值是 'true' 或 'false'，这样我就可以在我的代码中使用它。我似乎无法在网上的任何地方找到一个好的解决方案，但我确定是一个。有人有什么想法吗？

Answer 1

Alpine.js 使用 x-model directive 将变量绑定到输入元素。只需将这个隐藏的输入元素放在表单中存在 isOpen 变量的任何位置：

<input type="hidden" name="terms" x-model="isOpen" />

使用 AlpineJS 更改 <input> 值

change <input> value with AlpineJS

javascript

html

flask

alpine.js