A Selection Problem About Jquery

Question

In the code below, when I click lnkSecc, I want checkboxes under the first div coming after lnkSecc which id is Grup to be selected. How can I do it?

<td>Sipariş</td><td>
<a href="#" id="lnkSecc"  onclick="javascript:SelectSubCheckboxes(this);" >Seç/Kaldır</a>
</td><td>
<div id="Grup">
<table cellspacing="0" cellpadding="0" rules="all" border="0" id="dgrMenu__ctl6_dgrIslem" width="98%">
<tr>
<td align="Center" width="25"><font face="Verdana" size="1">&nbsp;</font></td>
</tr><tr>
<td align="Right"><font face="Verdana" size="1">
<input id="dgrMenu__ctl6_dgrIslem__ctl2_chkSec" type="checkbox" name="dgrMenu:_ctl6:dgrIslem:_ctl2:chkSec" />
</font></td>
</tr>
</table>
</div>
</td>
</tr><tr bgcolor="WhiteSmoke">
<td><b>Fatura</b></td><td><b>
<a href="#" id="lnkSecc"  onclick="javascript:SelectSubCheckboxes(this);" >Seç/Kaldır</a>
</b></td>
<td><b>
<div id="Grup">
</div>
</b></td>

Answer 1

First of all, ids are meant for unique elements on your html page. There should never be two elements with the same id. You should be using class attributes to distinguish elements of a similar type/function.

If you want to traverse the DOM, you'll want to go to the next div grup and find all descendants type checkbox.

See the jQuery Traverse/Find api

If you do change all ids to class, sample code would look something like this

 $(document).ready(function() {
    $("a.lnkSecc").click(function() {
     var children = $(this).next('div.Grup').find(':checkbox').get(0).checked=true;
    });
 });

Answer 2

I agree with the other posters, you really should change lnkSecc and Grup to Css classes.

If these are static HTML ids coming out of an ASP.Net datagrid, then you are using a template column. It should be relatively easy to change your static HTML in that template column to emit a class instead of an id.

With that change in effect, your code should look something like:

// Format all of your hyperlinks when the page finishes loading
$().ready(function() {

// For each hyperlink of CSS class lnkSecc
$(".lnkSecc").click(function(e) {

    // Don't let the hyperlink navigate
    e.preventDefault();

    // Walk UP the DOM to the first TR, and 
    // back down to the Grup CSS class, and then 
    // its child checkboxes
    $(this).parents("tr").find(".Grup input:checkbox").each(function() {

        // Mark the found checkbox as checked
        this.checked = true;

    });

});

});