title: How to define x-model in for-circle of checkboxes based on array?
body: <p>in my Laravel 8 /  tailwindcss 2 / Alpinejs 2.8 app I fill set of checkboxex based on array like:</p>
  <pre><code>&lt;template x-for=&quot;nextCategory in categories&quot; :key=&quot;nextCategory.id&quot;&gt;
      &lt;tr class=&quot;p-4 mb-15&quot;&gt;
          &lt;td&gt;
             &lt;input type=&quot;checkbox&quot;
                  x-bind:id=&quot;'cbx_' + nextCategory.id&quot; 
                  name=&quot;cbx_Categories&quot; 
                  x-bind:value=&quot;nextCategory.id&quot;
                  class=&quot;p-4 checked:bg-blue-600&quot;
              &gt;
              &lt;label :for=&quot;'cbx_' + nextCategory.id&quot; class=&quot;whitespace-nowrap md:flex-shrink-0&quot; 
              x-text=&quot;nextCategory.id+' : '+nextCategory.name&quot;&gt;
              &lt;/label&gt;
          &lt;/td&gt;
          &lt;td class=&quot;text-right&quot; x-text=&quot;nextCategory.ad_categories_count&quot;&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  <p>The checkboxes are rendered ok, but I try to keep state of any checkbox element in array defined as :</p>
  <pre><code>  searchSelectedCategoryIds: [],
  </code></pre>
  <p>and use this array in checkbox x-model definition:</p>
  <pre><code>&lt;template x-for=&quot;nextCategory in categories&quot; :key=&quot;nextCategory.id&quot;&gt;
      &lt;tr class=&quot;p-4 mb-15&quot;&gt;
          &lt;td&gt;
             &lt;input type=&quot;checkbox&quot;
                  x-bind:id=&quot;'cbx_' + nextCategory.id&quot; 
                  name=&quot;cbx_Categories&quot; 
                  x-bind:value=&quot;nextCategory.id&quot;
                 x-model=&quot;searchSelectedCategoryIds&quot;
                 class=&quot;p-4 checked:bg-blue-600&quot;
              &gt;
              &lt;label :for=&quot;'cbx_' + nextCategory.id&quot; class=&quot;whitespace-nowrap md:flex-shrink-0&quot; 
              x-text=&quot;nextCategory.id+' : '+nextCategory.name&quot;&gt;
              &lt;/label&gt;
          &lt;/td&gt;
          &lt;td class=&quot;text-right&quot; x-text=&quot;nextCategory.ad_categories_count&quot;&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  <p>as result all by clicking on any checkbox all checkboxes are selected and searchSelectedCategoryIds
  has value “on”</p>
  <p>Which way is valid ?</p>
  <p><strong>MODIFIED BLOCK :</strong></p>
  <pre><code>@extends('layouts.app')
  @section('content')
  
      &lt;div class=&quot;flex items-center justify-center p-8 m-10&quot;&gt;
  
          &lt;div class=&quot;flex justify-center w-screen h-screen bg-gray-100&quot;  x-data=&quot;checkBoxTest()&quot; &gt;
  
              categories::&lt;span x-text=&quot;categories.id&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;hr&gt;
              TestsearchSelectedCategoryIds::&lt;span x-text=&quot;TestsearchSelectedCategoryIds&quot;&gt;&lt;/span&gt;&lt;br&gt;&lt;hr&gt;
                                &lt;table x-show=&quot;categories.length&quot;&gt;
                                  &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Ads Number&lt;/th&gt;
                                  &lt;/tr&gt;
                                  &lt;/thead&gt;
                                  &lt;tbody&gt;
  
    &lt;template x-for=&quot;nextCategory in categories&quot; :key=&quot;nextCategory.id&quot;&gt;
      &lt;tr class=&quot;p-4 mb-15&quot;&gt;
          &lt;td&gt;
             &lt;input type=&quot;checkbox&quot;
                  x-bind:id=&quot;'cbx_' + nextCategory.id&quot; 
                  name=&quot;cbx_Categories&quot; 
                  x-bind:value=&quot;nextCategory.id&quot;
                  class=&quot;p-4 checked:bg-blue-600&quot;
                  x-model=&quot;TestsearchSelectedCategoryIds&quot;     
              &gt;
              &lt;label :for=&quot;'cbx_' + nextCategory.id&quot; class=&quot;whitespace-nowrap md:flex-shrink-0&quot; 
              x-text=&quot;nextCategory.id+' : '+nextCategory.name&quot;&gt;
              &lt;/label&gt;
          &lt;/td&gt;
          &lt;td class=&quot;text-right&quot; x-text=&quot;nextCategory.ad_categories_count&quot;&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
                                     &lt;/table&gt;
    
    &lt;/div&gt;
      &lt;/div&gt;
  
  @endsection
  
  @section('scripts')
      &lt;script&gt;
  
  
  function checkBoxTest() {
      return {
        TestsearchSelectedCategoryIds: '',
      
  categories : [
    {
       ad_categories_count: 2,
       id: 1,
       name: &quot;Laptops&quot;
    },
    
    {
      ad_categories_count: 3,
      id: 2,
      name: &quot;Computer Monitor&quot;
    },
    
    {
      ad_categories_count: 4,
      id: 4,
      name: &quot;Computer Accessories&quot;
    }
      
  ]
  
      }}
  
  
      &lt;/script&gt;
  @endsection
  </code></pre>