Child terms unticked by default

This topic has 15 replies, 2 voices, and was last updated 3 years, 10 months ago by Ernest Marcinko.

Viewing 15 posts - 1 through 15 (of 16 total)

Author

Posts

July 17, 2022 at 5:17 pm #38452

Participant

When a parent category is ticked in a search, the children are ticked too. Is there any way to disable this behaviour, so the parent is ticked, but not the children?

Image one is what happens by default, image two is the behaviour I would like to happen when the parent is ticked.

This topic was modified 3 years, 10 months ago by theape.

July 18, 2022 at 9:32 am #38458

theape

Participant

To add, I have everything un-checked. The children are ticked when the parent is ticked, I only want the parent ticked when it’s clicked.

July 18, 2022 at 4:11 pm #38471

Ernest Marcinko

Keymaster

Hi,

I had to a dig a bit for this, but I recall someone else about a year ago had a similar request, and we found a possible solution with minimal coding.

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', 'asp_add_menu_stop_checkbox_parent_child');
function asp_add_menu_stop_checkbox_parent_child() {
  ?>
  <script>
	jQuery(function($){
		$('*[data-lvl]').removeAttr('data-lvl');
	});
  </script>
  <?php
}

This should basically remove the attribute from the checkbox elements, which indicates their levels.

July 18, 2022 at 4:31 pm #38472

theape

Participant

Thank you, it does exactly what I asked for. 🙂

The problem I have now, is there anyway to make the code more specific to those checkboxes?

It disables/overrides the “Frontend Search Settings > Categories & Taxonomy Terms > Hide child terms, where the parent checkbox is unchecked?” option. And I’m worried it might have other knock on effects on the website.

July 18, 2022 at 4:42 pm #38473

theape

Participant

You cannot access this content.

July 19, 2022 at 11:51 am #38479

theape

Participant

I’m so close, I don’t know if you can help nudge it over the line.

	jQuery(function($){
		$('*[data-lvl]').removeAttr('data-lvl');
		$(".asp_option_cat_level-1").hide();
		$(".asp_option_cat_level-2").hide();
		$(".asp_option_cat_level-0").click(function(){
			$(this).siblings('.asp_option_cat_level-1').toggle();
			$(this).siblings('.asp_option_cat_level-2').hide();
		});
		$(".asp_option_cat_level-1").click(function(){
			$(this).siblings('.asp_option_cat_level-2').toggle();
		});  
	});

How do I get this hide/show only the children of the checked parent rather than all of the children when a parent is clicked? I also need to figure out how to have the children automatically unchecked when a parent is unchecked.

July 19, 2022 at 12:28 pm #38481

Ernest Marcinko

Keymaster

Hi,

Something like this:

jQuery(function($){
	$('*[data-lvl]').removeAttr('data-lvl');
	$(".asp_option_cat_level-1").hide();
	$(".asp_option_cat_level-2").hide();
	$(".asp_option_cat_level-0").click(function(){
		var $next = $(this).next();
		console.log(this, $next);
		while ( $next.hasClass('asp_option_cat_level-1') || $next.hasClass('asp_option_cat_level-2') ) {
			if ( $next.hasClass('asp_option_cat_level-1') ) {
				$next.toggle();
			} else {
				$next.hide();
			}
			$next = $next.next();
		}
	});
	$(".asp_option_cat_level-1").click(function(){
		var $next = $(this).next();
		while ( $next.hasClass('asp_option_cat_level-2') ) {
			$next.toggle();
			$next = $next.next();
		}
	});  
});

July 19, 2022 at 1:43 pm #38483

theape

Participant

Thank you, that’s brilliant! The only bit I can’t figure out now is how to get the children to uncheck automatically when the parent is unchecked.

July 19, 2022 at 2:41 pm #38487

Ernest Marcinko

Keymaster

You are welcome. That should not be too difficult, try this instead of the previous version:

jQuery(function($){
	$('*[data-lvl]').removeAttr('data-lvl');
	$(".asp_option_cat_level-1").hide();
	$(".asp_option_cat_level-2").hide();
	$(".asp_option_cat_level-0").click(function(){
		var $next = $(this).next(), checked = $(this).find('input[type=checkbox]').prop('checked');
		while ( $next.hasClass('asp_option_cat_level-1') || $next.hasClass('asp_option_cat_level-2') ) {
			if ( $next.hasClass('asp_option_cat_level-1') ) {
				$next.toggle();
			} else {
				$next.hide();
			}
			if ( !checked ) {
				$next.find('input[type=checkbox]').prop('checked', false);
			}
			$next = $next.next();
		}
	});
	$(".asp_option_cat_level-1").click(function(){
		var $next = $(this).next(), checked = $(this).find('input[type=checkbox]').prop('checked');
		while ( $next.hasClass('asp_option_cat_level-2') ) {
			$next.toggle();
			if ( !checked ) {
				$next.find('input[type=checkbox]').prop('checked', false);
			}
			$next = $next.next();
		}
	});  
});

July 19, 2022 at 2:50 pm #38490

theape

Participant

You cannot access this content.

July 19, 2022 at 3:01 pm #38491

theape

Participant

You cannot access this content.

July 19, 2022 at 3:46 pm #38493

theape

Participant

You cannot access this content.

July 19, 2022 at 5:22 pm #38497

theape

Participant

For anyone else who runs into this issue, here’s the complete code with the refresh issue solved too.

add_action('wp_footer', 'asp_add_menu_stop_checkbox_parent_child');
function asp_add_menu_stop_checkbox_parent_child() {
  ?>
<script>
jQuery(document).ready(function($){
	$(window).load(function(){
		$('*[data-lvl]').removeAttr('data-lvl');
		$(".asp_option_cat_level-1").hide();
		$(".asp_option_cat_level-2").hide();
		$(".asp_option_cat_level-0").click(function(){
			var $next = $(this).next(), checked = $(this).find('input[type=checkbox]').prop('checked');
			while ( $next.hasClass('asp_option_cat_level-1') || $next.hasClass('asp_option_cat_level-2') ) {
				if ( $next.hasClass('asp_option_cat_level-1') ) {
					$next.toggle();
				} else {
					$next.hide();
				}
				if ( !checked ) {
					$next.find('input[type=checkbox]').prop('checked', false);
				}
				$next = $next.next();
			}
		});
		$(".asp_option_cat_level-1").click(function(){
			var $next = $(this).next(), checked = $(this).find('input[type=checkbox]').prop('checked');
			while ( $next.hasClass('asp_option_cat_level-2') ) {
				$next.toggle();
				if ( !checked ) {
					$next.find('input[type=checkbox]').prop('checked', false);
				}
				$next = $next.next();
			}
		}); 
	});  
});
</script>
  <?php
}

July 20, 2022 at 12:58 pm #38503

Ernest Marcinko

Keymaster

You cannot access this content.

July 20, 2022 at 1:14 pm #38505

theape

Participant

You cannot access this content.