How to define x-model in for-circle of checkboxes based on array? - alpine.js

Question

in my Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app I fill set of checkboxex based on array like:
<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>
The checkboxes are rendered ok, but I try to keep state of any checkbox element in array defined as :
searchSelectedCategoryIds: [],
and use this array in checkbox x-model definition:
<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>
as result all by clicking on any checkbox all checkboxes are selected and searchSelectedCategoryIds
has value “on”
Which way is valid ?
MODIFIED BLOCK :
#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

Answer 1

[EDITED TO BE LESS CONFUSING]
I need to see your x-data. Your <template> seems fine. I tried to get the value of searchSelectedCategoryIds: [], to be "on" and can only reproduce your result if:
I set searchSelectedCategoryIds: [],; and
I remove the x-bind:value="nextCategory.id" in the <input> attribute.
Meanwhile, if:
I set searchSelectedCategoryIds: '', instead of searchSelectedCategoryIds: [], (a string instead of an array); and
I set the x-bind:value="nextCategory.id" in the <input> attribute;
I will get the the value of true which is also the wrong output.
AFAIK, the browser will determine the value of <input type="checkbox"> if we don't set it. In this case, the browser sets it to "on". So, the issue here is a failed binding but I cannot verify unless I can see your x-data structure. Here's my attempt to replicate but with everything set:
<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