大佬教程收集整理的这篇文章主要介绍了如何在基于数组的复选框 for-circle 中定义 x-model？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在我的 Laravel 8 / tailwindCSS 2 / AlpineJs 2.8 应用程序中，我根据数组填充了一组复选框，例如：
<template x-for="nextcategory in categorIEs" :key="nextcategory.ID">
<tr class="p-4 mb-15">
<td>
<input type="checkBox"
x-bind:ID="'cbx_' + nextcategory.ID"
name="cbx_CategorIEs"
x-bind:value="nextcategory.ID"
class="p-4 checked:bg-blue-600"
>
<label :for="'cbx_' + nextcategory.ID" class="whitespace-nowrap md:flex-shrink-0"
x-text="nextcategory.ID+' : '+nextcategory.name">
</label>
</td>
<td class="text-right" x-text="nextcategory.ad_categorIEs_count">
</td>
</tr>
</template>
复选框呈现正常，但我尝试将数组中任何复选框元素的状态定义为：
searchSELEctedcategoryIDs: [],并在复选框 x-model 定义中使用此数组：
<template x-for="nextcategory in categorIEs" :key="nextcategory.ID">
<tr class="p-4 mb-15">
<td>
<input type="checkBox"
x-bind:ID="'cbx_' + nextcategory.ID"
name="cbx_CategorIEs"
x-bind:value="nextcategory.ID"
x-model="searchSELEctedcategoryIDs"
class="p-4 checked:bg-blue-600"
>
<label :for="'cbx_' + nextcategory.ID" class="whitespace-nowrap md:flex-shrink-0"
x-text="nextcategory.ID+' : '+nextcategory.name">
</label>
</td>
<td class="text-right" x-text="nextcategory.ad_categorIEs_count">
</td>
</tr>
</template>
结果全部通过单击任何复选框选择所有复选框并 searchSELEctedcategoryIDs 具有“on”值
哪种方式有效？
修改块：
@extends('layouts.app')
@section('content')
<div class="flex items-center justify-center p-8 m-10">
<div class="flex justify-center w-screen h-screen bg-gray-100" x-data="checkBoxtest()" >
categorIEs::<span x-text="categorIEs.ID"></span><br><hr>
TestsearchSELEctedcategoryIDs::<span x-text="TestsearchSELEctedcategoryIDs"></span><br><hr>
<table x-show="categorIEs.length">
<thead>
<tr>
<th>name</th>
<th>Ads number</th>
</tr>
</thead>
<tbody>
<template x-for="nextcategory in categorIEs" :key="nextcategory.ID">
<tr class="p-4 mb-15">
<td>
<input type="checkBox"
x-bind:ID="'cbx_' + nextcategory.ID"
name="cbx_CategorIEs"
x-bind:value="nextcategory.ID"
class="p-4 checked:bg-blue-600"
x-model="TestsearchSELEctedcategoryIDs"
>
<label :for="'cbx_' + nextcategory.ID" class="whitespace-nowrap md:flex-shrink-0"
x-text="nextcategory.ID+' : '+nextcategory.name">
</label>
</td>
<td class="text-right" x-text="nextcategory.ad_categorIEs_count">
</td>
</tr>
</template>
</table>
</div>
</div>
@endsection
@section('scripts')
<script>
function checkBoxtest() {
return {
TestsearchSELEctedcategoryIDs: '',categorIEs : [
{
ad_categorIEs_count: 2,ID: 1,name: "LaPTOPs"
},{
ad_categorIEs_count: 3,ID: 2,name: "Computer Monitor"
},{
ad_categorIEs_count: 4,ID: 4,name: "Computer AccessorIEs"
}
]
}}
</script>
@endsection
[已编辑以减少混淆]
我需要看看你的 x-data。您的 <template> 看起来不错。我试图将 searchSELEctedCategoryIds: [], 的值设为 "on"，并且只能在以下情况下重现您的结果：
searchSELEctedCategoryIds: [],；和x-bind:value="nextCategory.id" 属性中的 <input>。同时，如果：
searchSELEctedCategoryIds: '', 而不是 searchSELEctedCategoryIds: [], （String 而不是 array）；和x-bind:value="nextCategory.id" 属性中设置了 <input>；我会得到 true 的值，这也是错误的输出。
AFAIK，如果我们不设置它，浏览器将确定 <input type="checkbox"> 的值。在这种情况下，浏览器将其设置为 "on"。因此，这里的问题是绑定失败，但除非我能看到您的 x-data 结构，否则我无法验证。这是我尝试复制但已设置所有内容的尝试：
<form class="bg-gray-800">
<div class="flex justify-center items-center max-w-lg mx-auto h-screen">
<table x-data="formRender()" class="bg-gray-50">
<caption class="bg-gray-100 font-light text-yellow-700 uppercase tracking-widest">title</caption>
<thead class="border-t border-gray-300 font-bold">
<tr>
<td>Item</td>
<td>Count</td>
</tr>
</thead>
<tbody class="divide-y border-gray-300">
<template x-for="nextCategory in categories" :key="nextCategory.id">
<tr class="p-4 mb-15">
<td>
<input type="checkbox" x-bind:id="'cbx_' + nextCategory.id" name="cbx_Categories" x-bind:value="nextCategory.id" x-model="searchSELEctedCategoryIds" class="p-4 checked:bg-blue-600">
<label :for="'cbx_' + nextCategory.id" class="whitespace-nowrap md:flex-shrink-0" x-text="nextCategory.id+' : '+nextCategory.name">
</label>
</td>
<td class="text-right" x-text="nextCategory.ad_categories_count">
</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td class="bg-yellow-500 text-center" colspan="2">
<output x-text=" 'Item checked: ' + searchSELEctedCategoryIds"></output>
</td>
</tr>
</tfoot>
</table>
</div>
</form>
<script>
function formRender() {
return {
categories: [{
id: 1,name: 'banana',ad_categories_count: 'one'
},{
id: 2,name: 'apple',ad_categories_count: 'two'
},{
id: 3,name: 'orange',ad_categories_count: 'three'
}
],searchSELEctedCategoryIds: [],}
}
</script>
https://codepen.io/wanahmadfiras/pen/YzpmERK
以上是大佬教程为你收集整理的如何在基于数组的复选框 for-circle 中定义 x-model？全部内容，希望文章能够帮你解决如何在基于数组的复选框 for-circle 中定义 x-model？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。