表单提交时如何根据type="button"、role="switch"元素的aria-checked值传布尔值到PHP

你不需要修改现有开关的样式逻辑，用以下两种低成本方案即可实现状态提交：

方案1：添加隐藏表单元素同步状态（优先推荐，适配同步/异步提交） #

这是改造成本最低的方案，完全不影响现有开关的显示效果，仅需新增1行原生表单元素，调整Alpine状态作用域即可：

1. 将原按钮上的x-data="{ on: false }"移到外层父容器，让状态可以被同层级的隐藏元素访问
2. 新增type="hidden"的表单输入框，用x-model和开关状态双向绑定，表单提交时会自动将状态值传给PHP

修改后完整代码示例 #

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script src="//unpkg.com/alpinejs" defer></script>

<!-- 把x-data移到外层父容器 -->
<div class="flex items-start" x-data="{ on: false }">
  <div class="flex-shrink-0">
    <button type="button" class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-mixed-one bg-mixed-one"
      role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-mixed-one': on, 'bg-gray-300': !(on) }">
         <!-- 新增隐藏表单元素，name改为你实际业务需要的字段名 -->
         <input type="hidden" name="policy_switch" x-model="on" :value="on ? 1 : 0">
         <span class="sr-only">Policy</span>
           <span aria-hidden="true" 
             class="inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" 
             x-state:on="Enabled" 
             x-state:off="Not Enabled" 
             :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }">
            </span>
     </button>
  </div>
  <div class="ml-3">
    <p class="text-base text-gray-500">* Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  </div>
</div>

PHP接收示例 #

// 同步提交场景直接从POST/GET中取，值为1（开启）或0（关闭）
$switchStatus = !empty($_POST['policy_switch']);

方案2：异步提交直接取状态 #

如果你的表单是用AJAX异步提交，不需要额外加元素，直接在提交逻辑中读取Alpine的on状态值作为请求参数传给PHP接口即可。

内容的提问来源于stack exchange，提问作者buchstabe