使用Alpine Js关闭模态时如何取消选中复选框？答案

【问题标题】：How Can I Uncheck a Checkbox When a Modal Closed With Alpine Js?使用Alpine Js关闭模态时如何取消选中复选框？
【发布时间】：2021-02-15 22:03:03
【问题描述】：

我正在尝试使用 Livewire 和 Alpine Js。我有一个复选框，在选中时会打开一个模式：

<div x-data="{ showModal: false }" class="flex flex-col w-full md:w-full px-3 mb-6">
    <input wire:model="projectOptions" x-on:click="showModal = true" name="projectOptions" value="1" type="checkbox" class="opacity-0 absolute">
    <div x-show="showModal"
         x-cloak
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 transform"
         x-transition:enter-end="opacity-100 transform"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center px-4 md:p-0">
        <div @click.away="showModal = false" class="flex flex-col bg-white rounded-xl shadow-lg py-4 w-3/12">
            <div class="flex mb-4 justify-around">
                <h3 class="text-2xl font-semibold">Title</h3>
            </div>
            <div wire:ignore class="editor-layout" id="privacyContract">
                <div x-data
                     x-ref="quillEditor"
                     x-init="toolbarOptions = ['bold', 'italic', {'list': 'bullet'}, 'align'];
                         quill2 = new Quill($refs.quillEditor, 
                         {
                             theme: 'snow',
                             placeholder: 'Content here...',
                             modules: {
                                 toolbar: toolbarOptions
                             }
                         });
                         quill2.on('text-change', function () 
                         { 
                             $dispatch('input', quill2.root.innerHTML);
                         });"
                     wire:model.debounce.2000ms="privacyContract">
                </div>
            </div>
            <div class="flex justify-end mr-4">
                <button wire:loading.attr="disabled" class="">Send</button>
            </div>
        </div>
    </div>
</div>

当我点击外部模式时，它关闭（使用@click.away）但复选框保持选中状态。当我在模式之外单击时，如何取消选中该复选框？

【问题讨论】：

标签： checkbox laravel-livewire alpine.js

【解决方案1】：

我想通了。将 x-ref="chckbx" 添加到这样的输入中：

<input wire:model="projectOptions" x-on:click="showModal = true" x-ref="chckbx" name="projectOptions" value="1" type="checkbox" class="opacity-0 absolute">

并像这样更改模态 div：

<div @click.away="showPrivacyContract = false, $refs.chckbx.checked = false">

现在正在运行...

【讨论】：