Skip Navigation

[Gelöst] Changing radio button background-color after click.

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 support ticket is created vor 6 Jahre, 8 Monate. There's a good chance that you are reading advice that it now obsolete.

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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 12:00 – 17:00 -
- 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 18:00 – 21:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 9 Antworten, has 2 Stimmen.

Last updated by Junichiro Taira vor 6 Jahre, 8 Monate.

Assisted by: Noman.

Author
Artikel
#561121
image.jpg

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: Englisch (English )

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

Custom Search Settings.png

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: Englisch (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: Englisch (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: Englisch (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
スクリーンショット 2017-08-18 21.53.41.png

Of course I did that.

#561278

Noman
Supporter

Languages: Englisch (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 !

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.