Question

Is there an easy way in jQuery to return the owner form for a deeply-nested checkbox (or input) element? Here’s an example of what I mean:

<form>
    <table>
        <thead>
            <tr>
                <td>123</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td><input type="checkbox" class="checkall" /></td>
            </tr>
        </tfoot>
    </table>
</form>

Then I have the following jQuery code:

$('checkbox.checkall').each(function() { 
    // Access form element of the checkbox here
});

In the above example, I would like to obtain the form to which the checkbox belongs. Natually, I could do this using a chained parent() method, but the checkbox might not always be the same nesting depth from the root form element.

Sorry if it’s not clear, but it’s difficult to explain.

Answer 1

Get the closest form

$("input[type=checkbox]").closest("form");

From jQuery API:

Description: Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.

.closest( selector )

selector: A string containing a selector
expression to match elements against.