Sprig - Filter entries by custom field checkbox values, separate values as well as all values

Question

I am having a question regarding Sprig. I do want to filter my entries for values that are defined in a dropdown field (example below is simplified). It does work to the point where I want to filter all entries for all values, on page load all single checkboxes should be checked as well as the all checkbox. The problem is that Sprigs AJAX request sends a single request for each single filter e.g.:

dropdown_field[]: dropdown_value_1
dropdown_field[]: dropdown_value_2

but for the all filter, and e.g. one checkbox it will be:

dropdown_field[]: dropdown_value_1, dropdown_value_2 .....
dropdown_field[]: dropdown_value_2

Unchecking the all checkbox will not empty the array, what it should.

That will cause the single filters not to work if all is checked. How can I make sure that the query request will be one array for all values instead of multiple query requests?

All Filters should be activated on load, the all filter would be disabled then. If a single checkbox is checked all shouldn't be checked (array has to be empty except the single value).

{% set dropdown_field = ['dropdown_value_1', 'dropdown_value_2', 'dropdown_value_3', 'dropdown_value_4', 'dropdown_value_5'] %}

{% set entryQuery = craft.entries({
    dropdown_field: dropdown_field,
    section: 'section_1',
}) %}

<div s-replace="#results">
    <div>
        <input sprig type="checkbox" name="dropdown_field[]" id="dropdown_value_all" value="" {{ dropdown_field|length >= 5 ? 'checked disabled' : '' }}>
        <label for="dropdown_value_all">
            Select All Values
        </label>
    </div>
    {% for value in dropdown_field %}
    <div>
        <input sprig type="checkbox" name="dropdown_field[]" id="{{ value }}" value="{{ value }}" {{ value in dropdown_field ? 'checked' : '' }}>
        <label for="{{ value }}">
            {{ value }}
        </label>
    </div>
    {% endfor %}
</div>

<div id="results">
    <ul>
    {% for entry in entryQuery %}
        <li>{{ entry.title }}</li>
    {% endfor %}
    </ul>
</div>

Thank you!

Answer 1

My suggestion would be to give the Select All Values checkbox a unique name. That way, you can easily detect whether it was selected or not. You should also break dropdown_field out into 2 variables to avoid confusion.

{% set select_all_values = select_all_values ?? false

{% set dropdown_field_options = ['dropdown_value_1', 'dropdown_value_2', 'dropdown_value_3', 'dropdown_value_4', 'dropdown_value_5'] %}
{% set params = {section: 'section_1'} %}

{% if not select_all_values %}
    {% set params = params|merge({dropdown_field: dropdown_field} %}
{% endif %}

{% set entryQuery = craft.entries(params) %}


<div s-replace="#results">
    <div>
        <input sprig type="checkbox" name="select_all_values" id="dropdown_value_all" value="1" {{ select_all_values ? 'checked disabled' : '' }}>
        <label for="dropdown_value_all">
            Select All Values
        </label>
    </div>
    {% for value in dropdown_field_options %}
    <div>
        <input sprig type="checkbox" name="dropdown_field[]" id="{{ value }}" value="{{ value }}" {{ value in dropdown_field ? 'checked' : '' }}>
        <label for="{{ value }}">
            {{ value }}
        </label>
    </div>
    {% endfor %}
</div>