Child terms unticked by default

[theapeParticipant]

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 1 year, 9 months ago by  theape.

Attachments:

You must be logged in to view attached files.

[theapeParticipant]

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.

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[theapeParticipant]

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.

[theapeParticipant]

You cannot access this content.

[theapeParticipant]

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.

[Ernest MarcinkoKeymaster]

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();
		}
	});  
});

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[theapeParticipant]

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.

[Ernest MarcinkoKeymaster]

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();
		}
	});  
});

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[theapeParticipant]

You cannot access this content.

[theapeParticipant]

You cannot access this content.

[theapeParticipant]

You cannot access this content.

[theapeParticipant]

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
}

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[theapeParticipant]

You cannot access this content.

[Author]

Posts