Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem:
In a Custom Search View, how to change radio button background color after click?

Solution:
1. In View >> Custom Search Settings >> select “Always show all values for inputs” and add this css and modify as needed:

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

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

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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 9 replies, has 2 voices.

Last updated by Junichiro Taira 2 years, 11 months ago.

Assigned support staff: Noman.

Author
Posts
#561121

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.

#561187

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.

#561198

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#561227

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

#561232

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

Thank you for feedback.

#561234

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.

#561249

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#561252
#561278

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#561282

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