asked on

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

Julian Hansen

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.

NerdsOfTech

ASKER

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.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

NerdsOfTech

ASKER

That worked! Thanks again!

Is there a performance difference between the two versions? pros and cons? or not really a significant difference?

NerdsOfTech

ASKER

Thanks for the additional explanation.

Julian Hansen

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.

NerdsOfTech

ASKER

Thanks so much for the extra research and follow-up!

Julian Hansen

You are welcome.