Check Mark Tree HTML / jQuery issue

This is pretty much the same question from https://www.experts-exchange.com/questions/29071374/Check-Mark-Tree-in-PHP.html

However, after a few changes were made, the solution from the previous question stopped working or the new changes broke the solution.

I need some help figuring out what is causing the issue.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(':checkbox', 'li').click(function() {
    var isChecked = $(this).is(':checked');
    $(this).nextAll('ul').find(':checkbox').each(function () {
        $(this).prop('checked', isChecked);
    });
});
</script>
</head>
<body>    
	<ul>
      <li>
		  <input type="checkbox" name="cid[]" id="a" value="a" /> 
		  <label for="a" style="color: #000">a</label>
		  <ul>
			<li>
			  <input type="checkbox" name="cid[]" id="a1" value="a1" />
			  <label for="a1" style="color: #000">a1</label>
			  <ul>
				<li>
				  <input type="checkbox" name="cid[]" id="a1a" value="a1a" />
				  <label for="a1a" style="color: #000">a1a</label>
				</li>
				<li>
				  <input type="checkbox" name="cid[]" id="a1b" value="a1b" />
				  <label for="a1b" style="color: #000">a1b</label>
				</li>
			  </ul>
			</li>
			<li>
			  <input type="checkbox" name="cid[]" id="a2" value="a2" />
			  <label for="a2" style="color: #000">a2</label>
			</li>
			<li>
			  <input type="checkbox" name="cid[]" id="a3" value="a3" />
			  <label for="a3" style="color: #aaa">a3 (d)</label>
			  <ul>
				<li>
				  <input type="checkbox" name="cid[]" id="a31" value="a31" />
				  <label for="a31" style="color: #aaa">a31 (d)</label>
				</li>
			  </ul>
			</li>
		  </ul>
	  </li>
    </ul>
  </body>
</html>

Open in new window

LVL 22
NerdsOfTechTechnology ScientistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Put your jQuery in a document ready block

$(function() {
  $(':checkbox', 'li').click(function() {
    var isChecked = $(this).is(':checked');
    $(this).nextAll('ul').find(':checkbox').each(function () {
      $(this).prop('checked', isChecked);
    });
  });
})

Open in new window

Your jQuery is running and trying to bind to the checkboxes before they have been rendered.
1
NerdsOfTechTechnology ScientistAuthor Commented:
Can you add this code to my code above to show me where the document ready block is? Or what does ready block mean? I'm still learning jQuery.
0
Julian HansenCommented:
I thought I already did.
Here is your code
<script>
$(':checkbox', 'li').click(function() {
    var isChecked = $(this).is(':checked');
    $(this).nextAll('ul').find(':checkbox').each(function () {
        $(this).prop('checked', isChecked);
    });
});
</script>

Open in new window

Here is the code from my post
$(function() {
  $(':checkbox', 'li').click(function() {
    var isChecked = $(this).is(':checked');
    $(this).nextAll('ul').find(':checkbox').each(function () {
      $(this).prop('checked', isChecked);
    });
  });
})

Open in new window

Just add the <script> </script> tags and do a straight replace.
1

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
If it were up to me though I would go with
<script>
$(function() {
  $(':checkbox').click(function() {
    var state = $(this).prop('checked');
    $(this).closest('li').find(':checkbox').prop({checked: state});
  });
});
</script>

Open in new window

But that is just personal preference.
1
NerdsOfTechTechnology ScientistAuthor Commented:
That worked! Thanks again!

Is there a performance difference between the two versions? pros and cons? or not really a significant difference?
0
NerdsOfTechTechnology ScientistAuthor Commented:
Thanks for the additional explanation.
0
Julian HansenCommented:
After profiling it the original one you had runs about 5 times faster - not so that you would notice the difference though
250ms / 10000 iterations vs 50ms / 10000 iterations.

This has to do with the use of the nextAll() method - if that is used on the second method instead of closest then the times come down to roughly equal.
1
NerdsOfTechTechnology ScientistAuthor Commented:
Thanks so much for the extra research and follow-up!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.