Multiple user controls and clientid asp.net JS

I am following the post:

开发者_JAVA技巧

http://mosesofegypt.net/post/GridView-with-Select-All-CheckBox-using-JQuery.aspx

to create a checkbox column in asp.net gridview with select/deselect all functionality. In my case, the gridview and the javascript (JQuery) code lies inside a dynamically load usercontrol, and there are more than one instances of that user control. The select/deselect functionality works only in the last usercontrol created on page. In other words, the gvProducts.ClientId in the js script knows only about the last gridview. Any ideas how can I get reference to the ClientIds of gridview inside other usercontrol (i.e. other than the last) ? Any help would be most appreciated.

EDIT : This question is essentially the same as asked in this post : Multiple user control instances and ClientID in JS but there are no helping answers for it.

Thanks, Ali

---

You could add a CssClass to the GridView and base your jQuery selector off of that.

Script:

<script type="text/javascript">
    $(function () {
        $(".t th input:checkbox").click(function () {
            var $checkbox = $(this).closest('table').find(':checkbox:not(:first)');
            $checkbox.attr('checked', $(this).attr('checked'));
        });
    });
</script>

2 tables with the same class name:

 <table class="t">        
    <tr>
        <th align="left" scope="col">Category</th>
        <th align="left" scope="col">Product</th>
        <th align="right" scope="col">Unit Price</th>
        <th align="left" scope="col">Supplier</th>
        <th scope="col">
            <input type="checkbox" name="select-all" />
        </th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
</table>
<br /><br /><br />
<table class="t">        
    <tr>
        <th align="left" scope="col">Category</th>
        <th align="left" scope="col">Product</th>
        <th align="right" scope="col">Unit Price</th>
        <th align="left" scope="col">Supplier</th>
        <th scope="col">
            <input type="checkbox" name="select-all" />
        </th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td><input type="checkbox" /></td>
    </tr>
</table>