提问人：Pouya 提问时间：2/12/2023 更新时间：2/12/2023 访问量：437
Alpinejs 事件侦听器打开复选框未切换显示变量值
Alpinejs Event Listener On Checkbox Not Toggling Show Variable Value
问：
我正在使用 Alpinejs 和 Laravel，我想在选中复选框时显示一个隐藏的输入字段。
所以这里是：
<div x-data="{ show:false }">
<div class="row mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1" name="change_background" @click="show = event.target.value == 'on' ? true : false">
<label class="form-check-label" for="gridCheck1">
Change Background
</label>
</div>
</div>
<div class="row mb-3" x-show="show">
<label for="background" class="col-sm-2 col-form-label">Background File</label>
<div class="col-sm-10">
<input class="form-control" type="file" name="background" id="background">
</div>
</div>
</div>
因此，如果用户选中复选框（更改背景），则会出现文件输入字段。
所以我尝试将值绑定到变量：show
@click="show = event.target.value == 'on' ? true : false">
现在的问题是，当我再次取消选中复选框以隐藏文件上传字段时，它仍然以某种方式出现在页面上。
那么这里出了什么问题呢？如何根据复选框的值切换此字段？
答：
2赞
Dauros
2/12/2023
#1
复选框的缺省值为 。因此总是，所以总是在第一次点击之后。onevent.target.value == 'on'trueshowtrue
修复非常简单，只需使用 x-model 指令将 的布尔值绑定到复选框：show
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<div x-data="{ show:false }">
<div class="row mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1" x-model="show">
<label class="form-check-label" for="gridCheck1">
Change Background
</label>
</div>
</div>
<div class="row mb-3" x-show="show">
<label for="background" class="col-sm-2 col-form-label">Background File</label>
<div class="col-sm-10">
<input class="form-control" type="file" name="background" id="background">
</div>
</div>
</div>
评论