jQuery selector not working when trying to interact with an ACF field admin

• alexrobar

• March 14, 2014 at 12:38 am

I’m having an issue with some custom jQuery that I’ve written to interact with an ACF field. I have a Relationship/Taxonomy field that lists all available taxonomies with checkboxes. The taxonomy is hierarchical, but only 2 levels deep. It just looks like this:

Parent Term 1
--- Child Term 1
--- Child Term 2
Parent Term 2
--- Child Term 3
--- Child Term 4

I’m trying to add jQuery that will check all child terms when a parent term is selected, and uncheck child terms when a parent term is unselected. For example, if someone were to check Parent Term 1, it would check both Child Term 1 and Child Term 2 automatically.

The jQuery that I’ve written for this works in a standalone environment. If I copy/paste the generated checkbox/ul structure into a standalone HTML file, my jQuery will work as I described. But when I include the jQuery with add_action(‘acf/input/admin_head, ‘my_jquery_function), the selector never fires. The function definitely executes – if I put an alert in there, it shows up when I visit the post editor. But the jQuery selector never seems to apply to checkbox elements.

Below is the code I am using. Here is a jsFiddle of the code applied against the generated checkbox code to show that the selector should work: http://jsfiddle.net/Lh8e6/1/

Does anyone have any experience with trying to get jQuery to interact with an ACF filed at all? Is there some trick I’m missing?

/**
 * Add jQuery to check/uncheck child answers when a parent question is checked
 * or unchecked
 */
function check_children_answers() {
	?>
	<script type="text/javascript">
		(function($) {
			$('ul.categorychecklist > li > label > :checkbox').click(function() {
    			$(this).parent().parent().children('ul.children').children('li').children('label').children(':checkbox').attr('checked', this.checked);
			});
        	})(jQuery);	
	</script>
	<?php
}
add_action('acf/input/admin_head', 'check_children_answers');

• alexrobar

• March 17, 2014 at 10:52 am

Well, I feel a bit like an idiot, but for anyone else having this issue… The problem is that WP’s admin side runs jQuery in no-conflict mode – meaning you can’t use $ to access jQuery (amoungst other things).

My updated JS to affect the checkboxes looks like this:

jQuery(document).ready(function(){
	// Check and uncheck children when parent is clicked
	jQuery('ul.categorychecklist > li > label > :checkbox').change(function() {
		jQuery(this).parent().parent().children('ul.children').children('li').children('label').children(':checkbox').attr('checked', this.checked);
	});
});

Using jQuery instead of the already reserved $ selector fixes the problem, and allows the code to run properly.