[Resolved] Changing radio button background-color after click.

[Author]

Posts

[Junichiro Taira]

hidden link

I made filter section as attached image.
CSS can work when mouse over filter button.
But when I click it and move out mouse, Background-color will go back to normal.
How can I keep it ?

I see there is "cheked" code. But I could not figure out how can I use it.

[Noman]

Hi Junichiro,

Thank you for contacting Toolset support. In View >> Custom Search Settings >> you are using “Show only available options for each input”.

Please disable this above option and select other one called “Always show all values for inputs” -- screenshot attached.

After that you need to apply “active” css class on the filter manually. If you can do that at your own please go ahead and let me know, I am also trying this at my end and once ready I will send you the css code to use.

Thank you for waiting.

[Noman]

After making the above change. Edit your View >> in Filter Editor >> CSS editor >> please add this css and modify as needed:

.radio.active label {
    background-color: #ebebeb;
}

In Filter Editor >> JS editor >> please add this JS and modify as needed:

jQuery(document).ready(function($){
	$('.wpv-filter-form .radio').on('click',function(){
		$('.wpv-filter-form .radio').removeClass('active');
		$(this).addClass('active');
	});
});

This will resolve the radio button active color issue. Thanks

[Junichiro Taira]

Thank you so much !! I was struggle to making jQuery !!!
You're great !

[Noman]

Great to hear that the issue is resolved, we are always happy to help you 🙂 Have a great day.

Thank you for feedback.

[Junichiro Taira]

Sorry I find out one problem.
It all work until when I hit rest button.

Left end is reset button. When I press this, all jQuery function stop working.

[Noman]

Have you Enabled this option in View's Custom Search Settings >> “Always show all values for inputs” ?

Like I mentioned here:
https://toolset.com/forums/topic/changing-radio-button-background-color-after-click/#post-561187

[Junichiro Taira]

Of course I did that.

[Noman]

Please remove old jQuery code and use this updated one in JS editor:

jQuery(document).ready(function($){
	$(document).on('click','.wpv-filter-form .radio', function(){
		$('.wpv-filter-form .radio').removeClass('active');
		$(this).addClass('active');
	});
});

Please let me know if this resolves the issue. Thank you

[Junichiro Taira]

Wow it's worked !!! Thank you so much !