[Resolved] Change the appearance of the label of filters presented as checkboxes

[Author]

Posts

[dominiqueM-3]

Tell us what you are trying to do?
I'm trying to change the appearance of the labels of the checkboxes that are used to filter the elements of a view.

Is there any documentation that you are following?
Several views have been implemented in the site project.
To present the filters for news (hidden link) or events topics (hidden link), I was able to achieve the desired result by following the instructions in this ticket:
https://toolset.com/forums/topic/styling-the-parents-parent-of-checked-checkbox/?utm_source=pocket_mylist
The 'AJAX refresh when changing any filter' and 'Show only filter options that would produce results' options are chosen for these 2 views which only use one set of filters (tags).

On the other hand for another view — hidden link — that I want to filter with 2 sets of filters (specialties and 'obtained the label') and a search field , the proposed script no longer works.

I would like to know if there is a way to have the same rendering for the checkbox labels on the page hidden link as the one obtained on the pages hidden link and hidden link

Thank you

[Luo Yang]

Hello,

please try below JS codes:

jQuery( 'input[type="checkbox"].js-wpv-filter-trigger' ).change(function( event, data ) {
  if (jQuery(this).is(':checked')) {
    jQuery(this).parent().parent().addClass('active');
  }else{
  	jQuery(this).parent().parent().removeClass('active');
  }
});

More helps:
hidden link

[dominiqueM-3]

Hi Luo,

Thank you for your reply.

To make sure I didn't make any mistakes, I pasted your script in the 'Custom JS and CSS' area of ​​the 'View' block (the parent block).
Unfortunately the css class 'active' seems to disappear from the <div class="checkbox"> with each AJAX refresh of the search filters.

Regards

[Luo Yang]

For AJAX refresh, you need to try the solution in below thread:
https://toolset.com/forums/topic/styling-the-parents-parent-of-checked-checkbox/?utm_source=pocket_mylist

Since it is a custom codes problem, if you need more assistance for it, please provide your website credentials in below private message box, I need to test and debug it in a live website.

[Luo Yang]

Thanks for the details, I have changed the JS codes as below:

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
    */
    jQuery('input[checked=checked]').parent().parent().addClass('active');
     
});

jQuery( document ).on( 'js_event_wpv_parametric_search_form_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.view_changed_form (object) The jQuery object for the View form after being updated
	* data.view_changed_form_additional_forms_only (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-form-view] shortcode
	* data.view_changed_form_additional_forms_full (object) The jQuery object containing additional forms from other instances of the same View inserted using the [wpv-view] shortcode
	*/
	jQuery('input[checked=checked]').parent().parent().addClass('active');
});

And add a CSS code as below:

div.checkbox.active label{
background-color: blue;
}

Please test again, check if it is what you want, thanks

[dominiqueM-3]

Hi, Luo

This is exactly what I wanted.

Thank you very much

[dominiqueM-3]

My issue is resolved now. Thank you!