<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>

CC BY-SA 4.0
2021-08-22T07:29:52.610Z
Can you mark this as the correct answer so that this question appears resolved?
Ben Croker
CC BY-SA 4.0
2022-10-12T19:32:53.663Z
If you want to make the filtering exclusive instead of inclusive, just change the `relatedTo` variable to `{% set relatedTo = not newsCat ? [] : ['and']|merge(newsCat) %}`
Bryce
CC BY-SA 4.0
2022-10-12T23:15:51.543Z
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 %}
`
Bryce
CC BY-SA 4.0
2021-03-10T07:38:04.047Z
2021-03-10T07:38:04.047Z
MisterMike
<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>

CC BY-SA 4.0
2021-03-10T07:30:39.243Z
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!
MisterMike
CC BY-SA 4.0
2021-03-10T08:25:37.913Z
Glad to hear it!
Ben Croker
CC BY-SA 4.0
2021-03-09T19:04:39.280Z
2021-03-09T19:04:39.280Z
Ben Croker
<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>

<craft3><plugin-sprig><category-filter>
How to filter entries by checkboxes using Sprig
# 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.
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() %}
  
      
      
          {{ category.title }}
      
  
  {% 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() %}
    
        
        
            {{ category.title }}
        
    
{% 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.

> **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!  

---

