Alpine.js 的不确定复选框

Question

我正在尝试使用 Alpine.js 实现不确定复选框

您可以选择所有复选框，但是当您尝试取消选中某些复选框时，所有复选框都将被取消选中。

看一下：https://codepen.io/nuno360/pen/gOwXpXP

<table x-data="{ allChecked: [] }"
    x-init="
        $watch('allChecked', value => {
            if (value.length === 0) {
                $refs.all.indeterminate = false;
                $refs.all.checked = false
            } else if (value.length == all.length) {
                $refs.all.indeterminate = false;
                $refs.all.checked = true
            } else {
                $refs.all.indeterminate = true
            }
        })
    " class="bg-white min-w-full divide-y divide-gray-200">
    <thead>
        <tr>
            <th scope="col" class="h-14 leading-none" width="60"><input id="all" x-ref="all" @change="allChecked = $event.target.checked ? all : []; console.log(allChecked)" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded"></th>
            <th scope="col" class="h-14 text-left text-xs text-gray-800 uppercase">Name</th>
            <th scope="col" class="h-14 relative px-6"><span class="sr-only">Editar</span></th>
        </tr>
    </thead>
    <tbody class="divide-y divide-gray-200">
        <tr class="hover:bg-gray-100">
            <td class="h-14 leading-none text-center" width="60">
                <input name="delete[]" x-model="allChecked" value="1" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded">
            </td>
            <td class="py-4 whitespace-nowrap text-sm text-gray-500">
                Regional Paradigm Technician
            </td>
            <td class="px-5 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900">Editar</a>
            </td>
        </tr>
        <tr class="hover:bg-gray-100">
            <td class="h-14 leading-none text-center" width="60">
                <input name="delete[]" x-model="allChecked" value="2" type="checkbox" class="form-checkbox border-gray-300 h-5 w-5 cursor-pointer rounded">
            </td>
            <td class="py-4 whitespace-nowrap text-sm text-gray-500">
                Inter Paradigm
            </td>
            <td class="px-5 py-4 whitespace-nowrap text-right text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900">Editar</a>
            </td>
        </tr>
    </tbody>
</table>

感谢帮助。

Answer 1

无法取消选择单个选项的原因是因为all在下面的行中给出了 ref，它是该watch函数的 dom 元素。

<input id="all" x-ref="all" @change="allChecked = $event.target.checked ? all : []; console.log(allChecked)" type="checkbox" class="...">

如果复选框被选中，我们需要将allChecked数组设置为解决这个问题，['1','2']all

<input id="all" x-ref="all" @change="allChecked = $event.target.checked ? ['1','2'] : []; console.log(allChecked)" type="checkbox" class="...">

更新

为了自动传递值，我们可以使用一个函数将复选框的所有值收集到一个数组中，如下所示。

<table x-data="{ allChecked: [], getValues(){
 var array = []
var checkboxes = document.querySelectorAll('input[x-model=allChecked]')

for (var i = 0; i < checkboxes.length; i++) {
  array.push(checkboxes[i].value)
}
return array;
               } }" x-init="..." > 

并使用该getValues函数而不是硬编码，如下所示。

<input id="all" x-ref="all" @change="allChecked = $event.target.checked ? getValues() : []; console.log(allChecked)" type="checkbox" class="...">