Checkbox in my tree menu cannot be checked

I build a tree menu with a checkbox. Then I use Jquery to make item could be hide. Here is my HTML.

    <div class="TreeMenu">
        <div class="section">
            <h1>Item1</h1>
            <ul>
                <li><input type="checkbox" role="checkbox" id="test1"/>detail1</li>
                <li><input type="checkbox" role="checkbox" id="test2" aria-checked="mixed" aria-controls="test3" onclick="this.checked=!this.checked"/>detail2
                    <ul>
                        <li><input type="checkbox" role="checkbox" id="test3" aria-checked="true" onclick="this.checked=!this.checked"/>detail2.2</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

And then it's my script.

        <script type="text/javascript">
        $(function () {
            $("li:has(ul)").click(function (e) {
                if (this == e.target) {
                    if ($(this).children().is(":hidden")) {
                        $(this).css("list-style-image","url(http://www.matrox.com/graphics/media/image/style/list_minus.gif)").children().show();
                    } else {
                        $(this).css("list-style-image","url(http://www.matrox.com/graphics/media/image/style/list_plus.gif)").children().hide();
                    }
                }
                return false;
            }).css("cursor", "pointer").click();

            $("li:not(:has(ul))").css({
                "cursor": "default",
                "list-style-image": "none"
            });
        });
    </script>

The "test1" checkbox can be checked, but "test2" and "test3" are no react when I click. How to solve the problem?