Alpine.js复选框事件监听器无法切换show变量值的问题

你遇到的问题核心在于复选框的value属性不会随勾选状态改变——不管勾选还是取消，复选框默认的value都是'on'，所以你的判断条件event.target.value == 'on'永远为真，取消勾选时自然不会触发隐藏逻辑。

有两种简洁的实现方案，选一种适合你的即可：

方案1：直接判断复选框的checked状态 #

不用依赖value，直接通过event.target.checked切换show变量：

<div x-data="{ show: false }">
  <input type="checkbox" @click="show = event.target.checked"> 显示文件上传框
  <input type="file" x-show="show">
</div>

方案2：用x-model双向绑定（更贴合Alpine.js风格） #

把复选框状态直接绑定到show变量，无需手动处理点击事件：

<div x-data="{ show: false }">
  <input type="checkbox" x-model="show"> 显示文件上传框
  <input type="file" x-show="show">
</div>

• x-show会自动根据变量的布尔值控制元素显隐，比手动写display: none更符合Alpine.js的设计逻辑。
• 结合Laravel表单使用时，只需保证文件输入框的name属性正确，状态切换不会影响表单提交流程。

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