Checkbox tree - Code tạo cây checkbox

Chia sẽ code tạo cây checkbox như sau:

Chức năng:
- Click Node cha sẽ check/uncheck tất cả Sub node của nó.
- Check/uncheck tất cả Sub node sẽ tự động check/uncheck Node cha của nó.

Code như sau:
HTML:
<div class="tree">
                <ul>
                    <li>
                        <div>
                            <img alt="" class="expand" src="images/minus.png" />
                            <img alt="" class="collapse" src="images/plus.png" />
                        </div>
                        <div>
                            <input type="checkbox" id="invoice" />
                        </div>
                        <div>Node 1</div>

                        <ul>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" id="list" /> Sub node 1 A
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 1 B
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 1 C
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <img alt="" class="expand" src="images/minus.png" />
                            <img alt="" class="collapse" src="images/plus.png" />
                        </div>
                        <div>
                            <input type="checkbox" id="payment" />
                        </div>
                        <div>Node 2</div>

                        <ul>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" id="payment-list" /> Sub node 2 A
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 2 B
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 2 C
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <img alt="" class="expand" src="images/minus.png" />
                            <img alt="" class="collapse" src="images/plus.png" />
                        </div>
                        <div>
                            <input type="checkbox" id="product" />
                        </div>
                        <div>Node 3</div>

                        <ul>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" id="product-list" /> Sub node 3 A
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 3 B
                                    </label>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <label>
                                        <input type="checkbox" /> Sub node 3 C
                                    </label>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

CSS:
.tree { width:500px }
.tree ul { list-style:none; }
.tree li { padding-top:10px }
.tree ul, .tree li, .tree div { float:left }
.tree ul, .tree li { width:100% }
.tree .expand { width:15px;height:15px; }
.tree .collapse { width:15px;height:15px;display:none }

JS:
$(".tree input[type='checkbox']").click(function() {
            var check = this.checked;

            // If clicked parent checkbox then check/uncheck all children checkbox
            if ($(this).closest("li").find("ul input[type='checkbox']").length > 0) {
                $(this).closest("li").find("ul input[type='checkbox']").each(function() {
                    $(this).prop('checked', check);
                });
            } else {
                // If check/uncheck all children then check/uncheck parent checkbox
                $(this).closest("ul").closest("li").find("input[type='checkbox']:first").prop('checked', $(this).closest("ul").find("input[type='checkbox']").not(':checked').length == 0);
            }
        });