This website uses cookies to personalize your experience. By using this website you agree to our cookie policy.

Reply To: Radio Button Checked State Styling

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

#33511
Ernest MarcinkoErnest 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.