Answers.Body: <p>I ended up using the following code - I just didn't come up with it earlier. I had to index the newsCat array used to denominate the single checkbox names.</p>
  <pre><code>
  {% set newsCat = newsCat ?? '' %}
  {% set relatedTo = newsCat|join(',') %}
  
  {% set entryQuery = craft.entries
      .section('news')
      .limit(5)
      .relatedTo(relatedTo)
  %}
  
  
  {% for category in craft.categories().group('news').all() %}
      &lt;li&gt;
          &lt;input sprig type=&quot;checkbox&quot; name=&quot;newsCat[{{ loop.index}}]&quot; value=&quot;{{ category.id }}&quot; {{ category.id in newsCat ? 'checked' :'' }}&gt;
          &lt;label for=&quot;checkbox_{{ category.id }}&quot;&gt;
              {{ category.title }}
          &lt;/label&gt;
      &lt;/li&gt;
  {% endfor %}
  
  {% do sprig.pushUrl('?' ~ {page:page, newsCat:relatedTo}|url_encode) %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-08-22T07:29:52.610Z
Answers.Text: Can you mark this as the correct answer so that this question appears resolved?
Answers.UserDisplayName: Ben Croker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-10-12T19:32:53.663Z
Answers.Text: If you want to make the filtering exclusive instead of inclusive, just change the `relatedTo` variable to `{% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat) %}`
Answers.UserDisplayName: Bryce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-10-12T23:15:51.543Z
Answers.Text: Slight amendment to that: if you're updating the URL, and then filtering based on those query parameters, you need to make sure to convert the filters from a string to an array on the initial page load. `{% if not sprig.isRequest and craft.app.request.getQueryParam('newsCat') != '' %}
    {% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat|split(',')) %}
  {% else %}
    {% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat) %}
  {% endif %}
  `
Answers.UserDisplayName: Bryce
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-10T07:38:04.047Z
Answers.LastActivityDate: 2021-03-10T07:38:04.047Z
Answers.UserDisplayName: MisterMike
Answers.Body: <p>Checkbox input field names should be in array format (not specific to Sprig), so I expect this should work.</p>
  <pre><code>&lt;input sprig type=&quot;checkbox&quot; class=&quot;filter_checkbox&quot; name=&quot;newsCat[]&quot; id=&quot;checkbox_{{ category.id }}&quot; value=&quot;{{ category.id }}&quot; {{ category.id in newsCat ? 'checked' : '' }}&gt;
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-10T07:30:39.243Z
Answers.Text: That ended up in always using newsCat[0], which I tried early. Based on your input, and since you believed it should work, I investigated further and got it working using below code. Thanks!
Answers.UserDisplayName: MisterMike
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-10T08:25:37.913Z
Answers.Text: Glad to hear it!
Answers.UserDisplayName: Ben Croker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-03-09T19:04:39.280Z
Answers.LastActivityDate: 2021-03-09T19:04:39.280Z
Answers.UserDisplayName: Ben Croker
Body: <p>I am using the Sprig plugin to filter news entries on a news overview page. I have three checkboxes for the categories related to the news entries.</p>
  <p>I have the page working for the basic functions by adapting code used on the <a href="https://putyourlightson.com/sprig/components/board" rel="nofollow noreferrer">Sprigboard</a>.</p>
  <p>But the page won't let me select multiple checkboxes. I can't figure out how to make Sprig respect all checkboxes and push the selection to the url.</p>
  <p>I have previously done this using vanilla javascript, but I wonder if such a feature could be solved elegantly using Sprig.</p>
  <p>Category checkboxes:</p>
  <pre><code>  {% for category in craft.categories().group('news').all() %}
    &lt;li class=&quot;filter--content--item {{ category.id in newsCat ? 'selected' : '' }}&quot;&gt;
        &lt;input sprig type=&quot;checkbox&quot; class=&quot;filter_checkbox&quot; name=&quot;newsCat&quot; id=&quot;checkbox_{{ category.id }}&quot; value=&quot;{{ category.id }}&quot; {{ category.id in newsCat ? 'checked' : '' }}&gt;
        &lt;label id=&quot;label_{{ category.id }}&quot; class=&quot;newsCatLabel&quot; for=&quot;checkbox_{{ category.id }}&quot;&gt;
            {{ category.title }}
        &lt;/label&gt;
    &lt;/li&gt;
    {% endfor %}
  </code></pre>
  <p>Search query:</p>
  <pre><code>  {% set newsCat = newsCat ?? '' %}
    {% set relatedTo = newsCat ? relatedTo|merge([newsCat]) : relatedTo %}
  
    {% set entryQuery = craft.entries
      .section('news')
      .limit(10)
      .relatedTo(relatedTo)
      .search(search)
    %}
    (...)
    {% do sprig.pushUrl('?' ~ {page: page, newsCat: newsCat}|url_encode) %}
  </code></pre>
  
Tags: <craft3><plugin-sprig><category-filter>
Title: How to filter entries by checkboxes using Sprig
ThreadText: # How to filter entries by checkboxes using Sprig
  
  (Asked by: username_0 on 2021-03-07)
  
  I am using the Sprig plugin to filter news entries on a news overview page. I have three checkboxes for the categories related to the news entries.
  
  I have the page working for the basic functions by adapting code used on the [Sprigboard](https://putyourlightson.com/sprig/components/board).
  
  But the page won't let me select multiple checkboxes. I can't figure out how to make Sprig respect all checkboxes and push the selection to the url.
  
  I have previously done this using vanilla javascript, but I wonder if such a feature could be solved elegantly using Sprig.
  
  Category checkboxes:
  
  ```
    {% for category in craft.categories().group('news').all() %}
    <li class="filter--content--item {{ category.id in newsCat ? 'selected' : '' }}">
        <input sprig type="checkbox" class="filter_checkbox" name="newsCat" id="checkbox_{{ category.id }}" value="{{ category.id }}" {{ category.id in newsCat ? 'checked' : '' }}>
        <label id="label_{{ category.id }}" class="newsCatLabel" for="checkbox_{{ category.id }}">
            {{ category.title }}
        </label>
    </li>
    {% endfor %}
  
  ```
  
  Search query:
  
  ```
    {% set newsCat = newsCat ?? '' %}
    {% set relatedTo = newsCat ? relatedTo|merge([newsCat]) : relatedTo %}
  
    {% set entryQuery = craft.entries
      .section('news')
      .limit(10)
      .relatedTo(relatedTo)
      .search(search)
    %}
    (...)
    {% do sprig.pushUrl('?' ~ {page: page, newsCat: newsCat}|url_encode) %}
  
  ```
  
  **Tags:** craft3, plugin-sprig, category-filter
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_0 on 2021-03-10. Score: 2 | Accepted answer
  
  I ended up using the following code - I just didn't come up with it earlier. I had to index the newsCat array used to denominate the single checkbox names.
  
  ```
  
  {% set newsCat = newsCat ?? '' %}
  {% set relatedTo = newsCat|join(',') %}
  
  {% set entryQuery = craft.entries
      .section('news')
      .limit(5)
      .relatedTo(relatedTo)
  %}
  
  {% for category in craft.categories().group('news').all() %}
      <li>
          <input sprig type="checkbox" name="newsCat[{{ loop.index}}]" value="{{ category.id }}" {{ category.id in newsCat ? 'checked' :'' }}>
          <label for="checkbox_{{ category.id }}">
              {{ category.title }}
          </label>
      </li>
  {% endfor %}
  
  {% do sprig.pushUrl('?' ~ {page:page, newsCat:relatedTo}|url_encode) %}
  
  ```
  
  > **Comments:**
  > **username_1**: Can you mark this as the correct answer so that this question appears resolved?  
  > **username_2**: If you want to make the filtering exclusive instead of inclusive, just change the `relatedTo` variable to `{% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat) %}`  
  > **username_2**: Slight amendment to that: if you're updating the URL, and then filtering based on those query parameters, you need to make sure to convert the filters from a string to an array on the initial page load. `{% if not sprig.isRequest and craft.app.request.getQueryParam('newsCat') != '' %}   {% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat|split(',')) %} {% else %}   {% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat) %} {% endif %} `  
  
  ---
  
  ### Answer by username_1 on 2021-03-09. Score: 4
  
  Checkbox input field names should be in array format (not specific to Sprig), so I expect this should work.
  
  ```
  <input sprig type="checkbox" class="filter_checkbox" name="newsCat[]" id="checkbox_{{ category.id }}" value="{{ category.id }}" {{ category.id in newsCat ? 'checked' : '' }}>
  
  ```
  
  > **Comments:**
  > **username_0**: That ended up in always using newsCat[0], which I tried early. Based on your input, and since you believed it should work, I investigated further and got it working using below code. Thanks!  
  > **username_1**: Glad to hear it!  
  
  ---
  
  