Radio Button Checked State Styling

[vbrains54Participant]

Hello,

First I would like to say thanks for this great plugin!

We are having a slight issue with it though:
On our development homepage ( near the bottom of http://tlpc.staging.wpengine.com/ ) we have a filter used to sort through specialists.
Everything is working pretty well except for the “checked” state of our Radio Buttons.

We are unable to style the clicked radio button to show the user what filter is active at the moment.

Could you please have a look and let me know if you know a way to handle this?
For some reason, it works well on mobile but it might be only because of the hover state.

Kind regards,
Viktor B.

[Ernest MarcinkoKeymaster]

Hi Viktor,

Unfortuantely this is not possible only via custom CSS styling, as CSS does not allow parent node selection based on child node values, you will need custom JS for it.

Luckily this is not too complicated, so I madde a quick custom code for you to handle that. Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

add_action('wp_footer', 'wp_footer_add_js_button_class');
function wp_footer_add_js_button_class() {
	?>
	<script>
	(function(){
		document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(label){
			label.addEventListener('click', function(event) {
				event.preventDefault();
				document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(element){
					element.classList.remove('asp_label_selected');
				});
				this.classList.add('asp_label_selected');
			});
		})
	}())
	</script>
	<?php
}

This will add the “asp_label_selected” class to the labels. You can use that to make any custom CSS to style the selected button:

.asp_label_selected {
    // your style here
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[vbrains54Participant]

Hi Ernest,

Thank you for the quick solution! That was brilliant!

Unfortunately, while this allows us to style the element behavior exactly as we needed, it breaks the filter’s functionality for this taxonomy.
With the code in place when you click on any of the “pills” ( All, Children, Teenagers, etc. ) the filter is not working.

Could the event.preventDefault(); be causing this?

I appreciate your time!

Kind regards,
Viktor B.

[Ernest MarcinkoKeymaster]

That is very likely actually. Can you please try without that line?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[vbrains54Participant]

Hi Ernest,
Yes, removing that line fixed it and it is working great!
Thank you very much for your assistance!

I have just another quick question:
How would you go about preselecting the first option on those pills to show the user that the filter is active when they first land on the page?

I have added

add_action('wp_footer', 'wp_footer_add_js_button_class_first_selected');
function wp_footer_add_js_button_class_first_selected() {
	?>
	<script>
	(function(){
		document.querySelectorAll('label.asp_label')[0].classList.add('asp_label_selected');
		
	}())
	</script>
	<?php
}

but for some reason, the first click on the filter is not recognized and only the second click activates the filtering functionality.

I would love to be able to fix that and have the first filter option selected by default ( with the new “selected” style applied). But even if it’s not possible it’s all good!

Thank you once again, Ernest!

Kind regards,
Viktor B.

[Ernest MarcinkoKeymaster]

Try this variation instead:

add_action('wp_footer', 'wp_footer_add_js_button_class');
function wp_footer_add_js_button_class() {
	?>
	<script>
	(function(){
		document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(label){
			if ( label.querySelector("input[type=radio]").checked ) {
				label.classList.add('asp_label_selected');
			}
			label.addEventListener('click', function(event) {
				document.querySelectorAll('.asp_sb_2_1 .asp_label').forEach(function(element){
					element.classList.remove('asp_label_selected');
				});
				this.classList.add('asp_label_selected');
			});
		})
	}())
	</script>
	<?php
}

It will set the class to the label, where the radio button is preselected by default.

If you are also using elementor live widget filtering, then try enabling the auto populate feature, so the plugin triggers an initial search with the selected arguments.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts