Radio Button Checked State Styling

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Radio Button Checked State Styling

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 year, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33496
    vbrains54
    vbrains54
    Participant

    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.

    #33499
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #33500
    vbrains54
    vbrains54
    Participant

    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.

    #33503
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #33509
    vbrains54
    vbrains54
    Participant

    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.

    #33511
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.