• Status: Solved
  • Priority: High
  • Security: Public
  • Views: 70
  • Last Modified:

Check Mark Tree in PHP

I have a checkmark 'tree'

[ ] a
[ ] a1
[ ] b
[ ] b1
[ ] b2

What HTML edits, as well as javascript or jquery code, can I use to make it so when someone clicks on the parent element the children elements get checked/unchecked.

Code used to generate the checkmark tree:

<?php
$arr = array(
  array('id'=>100, 'parent'=>0, 	'name'=>'a'),
  array('id'=>101, 'parent'=>0,		'name'=>'b'),
  array('id'=>102, 'parent'=>100,	'name'=>'a1'),
  array('id'=>103, 'parent'=>101,	'name'=>'b1'),
  array('id'=>104, 'parent'=>101,	'name'=>'b2')
);


$tree = buildTree($arr);
echo '<pre>';
print_r($tree);
echo '<hr><br>';
printTree($tree);
echo '</pre>';

function buildTree(array $elements, $parent = 0) {
    $branch = array();

    foreach ($elements as $element) {
        if ($element['parent'] == $parent) {
            $children = buildTree($elements, $element['id']);
            if ($children) {
                $element['children'] = $children;
            }
            $branch[] = $element;
        }
    }

    return $branch;
}

function printTree($tree) {
    if(!is_null($tree) && count($tree) > 0) {
        echo '<ul>';
        foreach($tree as $node) {
            echo '<li><input type="checkbox">'.$node['name'];
			if (isset($node['children'])){
				printTree($node['children']);
			}
            echo '</li>';
        }
        echo '</ul>';
    }
}

Open in new window

0
NerdsOfTech
Asked:
NerdsOfTech
  • 3
  • 2
  • 2
3 Solutions
 
Julian HansenCommented:
Can we rather see the HTML output. This is an HTML / JavaScript question more than a PHP.
0
 
NerdsOfTechTechnology ScientistAuthor Commented:
This might not be nested right; thus, the PHP output is slightly involved.

<pre>
<ul>
	<li><input type="checkbox">a
		<ul>
			<li><input type="checkbox">a1</li>
		</ul>
	</li>
	<li><input type="checkbox">b
		<ul>
			<li><input type="checkbox">b1</li>
			<li><input type="checkbox">b2</li>
		</ul>
	</li>
</ul>
</pre>

Open in new window

0
 
Chris StanyonCommented:
Based on your HTML output, this should do what you need:

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

Open in new window

0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Julian HansenCommented:
Previous post did not take
Here is the post
HTML
<ul>
  <li><input type="checkbox">a
    <ul>
      <li><input type="checkbox"> a1</li>
    </ul>
  </li>
  <li><input type="checkbox"> b
    <ul>
      <li><input type="checkbox"> b1</li>
      <li><input type="checkbox"> b2</li>
    </ul>
  </li>
</ul>

Open in new window

jQuery
<script>
$(function() {
  $(':checkbox').click(function() {
    var state = $(this).prop('checked');
    $(this).closest('li').find(':checkbox').prop({checked: state});
  });
});
</script>

Open in new window

Working sample here
0
 
NerdsOfTechTechnology ScientistAuthor Commented:
It worked until I added label tags:

<ul>
	<li><input type="checkbox" name="org" id="a" value="a" ><label for="a" style="color: #000">a</label></li>
	<ul>
		<li><input type="checkbox" name="org" value="a1" id="a1"><label for="a1" style="color: #000">a1</label></li>
		<li><input type="checkbox" name="org" value="a2" id="a2"><label for="a2" style="color: #000">a2</label></li>
		<li><input type="checkbox" name="org" value="a3" id="a3"><label for="a3"  style="color: #aaa">a3 (d)</label></li>
		<li><input type="checkbox" name="org" value="a4" id="a4"><label for="a4"  style="color: #aaa">a4 (d)</label></li>
	</ul>
	<li><input type="checkbox" name="org" id="b" value="b" ><label for="b" style="color: #000">b</label></li>
	<li><input type="checkbox" name="org" id="c" value="c" ><label for="c"  style="color: #aaa">c (d)</label></li>
	<ul>
		<li><input type="checkbox" name="org" value="c1" id="c1"><label for="c1"  style="color: #aaa">c1 (d)</label></li>
	</ul>
</ul>
<br><hr>

Open in new window


How should I modify the jQuery to account for the nested labels and label's click function?
0
 
Chris StanyonCommented:
Couple of points. Firstly, the HTML that you've just posted is NOT valid HTML. You need to fix that first. The only element that can be a child of a UL is an LI. In your code you have a UL as a child of a UL. Here's what it should look like:

<ul>
    <li><input type="checkbox" name="org" id="a" value="a" ><label for="a" style="color: #000">a</label>
       <ul>
            <li><input type="checkbox" name="org" value="a1" id="a1"><label for="a1" style="color: #000">a1</label></li>
            <li><input type="checkbox" name="org" value="a2" id="a2"><label for="a2" style="color: #000">a2</label></li>
            <li><input type="checkbox" name="org" value="a3" id="a3"><label for="a3"  style="color: #aaa">a3 (d)</label></li>
            <li><input type="checkbox" name="org" value="a4" id="a4"><label for="a4"  style="color: #aaa">a4 (d)</label></li>
        </ul>
    </li>
    <li><input type="checkbox" name="org" id="b" value="b" ><label for="b" style="color: #000">b</label></li>
    <li><input type="checkbox" name="org" id="c" value="c" ><label for="c"  style="color: #aaa">c (d)</label>
        <ul>
            <li><input type="checkbox" name="org" value="c1" id="c1"><label for="c1"  style="color: #aaa">c1 (d)</label></li>
        </ul>
    </li>
</ul>

Open in new window

Once you've got that sorted, just change the next() call in the script to nextAll():

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

Open in new window

1
 
NerdsOfTechTechnology ScientistAuthor Commented:
Thank you for the corrections and solutions! It works!
0
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.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now