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
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.
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
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"
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.
My issue is resolved now. Thank you so much! Very fast and adequate solution!!
