jQuery帮助同时选择父母和子女，但不帮助祖先的兄弟姐妹

Question

I'm trying to write a jquery call to select the "children" and the "parents" of a checkbox ul menu when the user checks the box.

This jquery selects the parents and the children properly, but it's also selecting the siblings when traversing up through the parents.

//Check the Parents
$(this).parents().find("input").checkUncheck(true);


//Check the Children
$(this).parent().siblings("ul").find("input").checkUncheck(true);

I don't want it to select the siblings when traversing the ancestors to select the "parents", but I don't know how to do the jquery. If anyone has some tips on how to do this I woudld be grateful!

Thanks.

Heres the HTML:

<ul id="p_menu_nav">
    <li>    
        <span>
            <input type="checkbox" title="no"> 
            <img images/minus.gif" class="a_hand"> Wells Fargo
        </span>
        <ul >
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img src="images/plus.gif" class="a_hand"> Southern Utah
                </span>
            </li>
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img src="images/plus.gif" class="a_hand"> Northern Utah
                </span>
            </li>
            <li >
                <span>
                    <input type="checkbox" title="no"> 
                    <img images/minus.gif" class="a_hand"> Central Utah
                </span> 
                <ul >
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4835">Apartment 1
                    </li>
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4844">Apartment 10
                    </li>
                    <li>
                        <input type="checkbox" name="approved_property_id_list" id="4934">Apartment 100
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

Try something like this:

    $(this).parents('li').find("> span > input").checkUncheck(true);

    //Check the Children
    $(this).closest('li').find('input').checkUncheck(true);

JSFiddle Example

Answer 2

Try this :)

$(function(){
    $("#p_menu_nav input").click(function(){
        var that = "#"+this.id;
        $("#p_menu_nav li:has(img)").each(function(){
            if($(this).contents().find(that).length > 0){
                $(this).find(">span input").attr("checked",true);
            }
        });
    });
});

1. Click function - just for testing
2. Remember the id of clicked element
3. Selecting all branches (I assumed all your branches has img, but it could be also span)
4. Checking if in clicked is in this branch
5. If YES then checking checkbox (You have used function checkUncheck(true))