asked on

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

Julian Hansen

Can we rather see the HTML output. This is an HTML / JavaScript question more than a PHP.

NerdsOfTech

ASKER

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

SOLUTION

Chris Stanyon

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

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?

ASKER CERTIFIED SOLUTION

Chris Stanyon

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

Thank you for the corrections and solutions! It works!