[Resolved] View select all in filter and live search

[Author]

Posts

[bartv-9]

Tell us what you are trying to do?
I have multiple blocks with taxonomy filters in a view by checkboxes. I want to offer a 'select all' option per block. I have tried this solution which works: https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

It selects all taxonomies per block of a taxonomy, but it doesn't trigger the live filter where the results are directly loaded.

So basically I miss the last step.

Is there any documentation that you are following?
https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

Is there a similar example that we can see?
https://toolset.com/forums/topic/view-filters-checkboxes-check-all-checkbox/#post-232850

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

Hello,

As the thread you mentioned above, there isn't such a built-in feature within Toolset Views plugin, it needs custom JS codes, if you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL and view URL, I can try to setup a demo for you.

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

I have done below modifications in your website:
Edit the post view "Overview products":
hidden link
in section "Search and Pagination", change the HTML codes from:

<input type="checkbox" id="selecctall_neighborhood" />Select All</span>
<div id="check_neighborhood">

To:

<input type="checkbox" id="selecctall_neighborhood" class="js-wpv-filter-trigger" />Select All</span>
<div id="check_neighborhood">

A generic jQuery 'change' event thrown on any other filter element with the CSS class "js-wpv-filter-trigger".

Please test again, check if it is fixed.

And since you are using AJAX search form, you can trigger the same JS codes after AJAX results are loaded with event "js_event_wpv_parametric_search_results_updated", for example, in section "Search and Pagination", click "JS editor", click button "Frontend events", see screenshot: Frontend-events.JPG

[bartv-9]

Wow, that works great!!

The only thing is that when I click 'select all' for the 2nd time it doesn't deselect the checkboxes below.

This function stopped working:
this.checked = false; //deselect all checkboxes with class "checkbox_neighborhood"

[Luo Yang Supporter Languages: English (English ) Chinese (Simplified) (简体中文 ) Timezone: Asia/Hong_Kong (GMT+08:00)]

The problem is that you are using static HTML codes to setup the "All plants" checkbox, it will be display as unchecked status always, I have done below modifications in your website:
1) in section "Search and Pagination", change the "All plants" checkbox HTML codes to:

<input type="checkbox" id="selecctall_neighborhood" name="selecctall_neighborhood" value="selecctall_neighborhood" class="js-wpv-filter-trigger" [wpv-conditional if=" ('[wpv-search-term param="selecctall_neighborhood"]' eq 'selecctall_neighborhood') "]checked="checked"[/wpv-conditional] />

It will pass URL parameter "selecctall_neighborhood", when the URL parameter value is "selecctall_neighborhood", then check the checkbox.

2) As I mentioned above, you can trigger the JS codes with event "js_event_wpv_parametric_search_results_updated", I have added below JS codes:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	$('#selecctall_neighborhood').click(function(event) {  //on click 
        if(this.checked) { // check select status
            $('#check_neighborhood .js-wpv-filter-trigger').each(function() { //loop through each checkbox
                this.checked = true;  //select all checkboxes with class "checkbox_neighborhood"               
            });
        }else{
            $('#check_neighborhood .js-wpv-filter-trigger').each(function() { //loop through each checkbox
                this.checked = false; //deselect all checkboxes with class "checkbox_neighborhood"                       
            });         
        }
    });
});

So when you click it 2nd time it will be able to deselect the checkboxes, it is just a demo for your reference.

[bartv-9]

My issue is resolved now. Thank you so much! Very fast and adequate solution!!