How to properly add a series of checkboxes to Search Options?

Question

I've been tasked with extending the normal Search Options (created with Component Creator, if it matters) to be located on the left of the page, and include a long list of various checkboxes to filter the search - a common feature of large ecommerce sites. I've created a series of custom Joomla input fields that render the checkboxes just as expected, and the filtering itself actually works just fine.

The problem is that the Clear Search button doesn't clear the checked boxes. The custom form field is in the form's XML, and is included in $config['filter_fields'] of the model, and works as a filter just as expected.

So is there an additional entry somewhere that I need to address for Clearing to work? I can't see anything that is being posted that triggers anything, only a class on the button js-stools-btn-clear, that gets used in jquery.searchtools.js, and that's where my trail goes cold.

My gut tells me that javascript is clearing the val of the filter fields somewhere/somehow, and the core code isn't equipped to clear an array of checkboxes.

Any suggestions or ideas would be appreciated. :)

Answer 1

I've not done this before so this could be the wrong approach, but will give it a shot anyway.

Looking at the default clear button for filters, it contains the following onclick attribute:

onclick="document.getElementById('filter_search').value='';this.form.submit();"

What this does is empties the input field, then resets the form.

Seeing as you have checkboxes, you can also clear them, then reset the form, for example:

JS:

function resetCheckboxes(source) 
{
    checkboxes = document.getElementsByName("somename");

    for (var i=0, n=checkboxes.length; i<n; i++) 
    {
        checkboxes[i].checked = source.checked;
    }
}

Checkboxes:

<input type="checkbox" name="somename" />
<input type="checkbox" name="somename" />
<input type="checkbox" name="somename" />

Button:

onclick="resetCheckboxes('this'); document.getElementById('filter_search').value='';this.form.submit();"

This above is of course assuming your checkboxes are using the same name="", which in the case I've provided, is somename

Hope this helps