Stanton Stanton - 5 months ago 26
Javascript Question

jQuery DOM navigation - find next label after checked checkbox

This should be easy, but I'm really stuck.

I have a table element that's populated with an asp.net repeater. My user checks one or more checkboxes and my jQuery loops through them to find the related label text. I had this working, but I changed the organization of my table, and now I can't seem to get it working again.

My HTML:

<table class="c _table">
<asp:Repeater ID="rptData" runat="server">
<HeaderTemplate>
<tr>
<th>
<asp:Image runat="server" CssClass="c_imgPlusMinus" ImageUrl="Images/plus.jpg" />
</th>
<th>
<asp:CheckBox ID="chkConAll" runat="server"/>Select Data
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td >
</td>
<td>
<asp:CheckBox runat="server" cssclass="cd_chk" /><asp:Label runat="server" Text='<%#Eval("DataName") %>' />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>


My jQuery:

var wholeString= '';
$('.cd_chk :checkbox:checked').each(function () {
wholeString = $(this).next('label').text();

(do some stuff with wholeString)

});


But I've been monkeying around with this for an hour or more, and I can't seem to pick up the text from that label in the repeater.

This post was where I got the syntax in this post ($(this).next('label').text();), but neither this nor anything else I've tried seems to work.

Thanks for any help.

EDIT: Per suggestion, here is the actual markup produced by my code. The repeater produced two rows:

<table class="c_analyte_table">
<tr>
<th>
<img class="c_imgPlusMinus" src="Images/plus.jpg" />
</th>
<th>
<input id="chkConAll" type="checkbox" name="ctl00$MainContent$rptConventionals$ctl00$chkConAll" />
Conventionals
</th>
</tr>
<tr class="cd_chemRow">
<td >
</td>
<td>
<span class="cd_chkLab"><input id="" type="checkbox" name="ctl00$MainContent$rptConventionals$ctl01$ctl00" /></span><span>Total Suspended Solids, Particulate</span>
</td>
</tr>
<tr class="cd_chemRow">
<td >
</td>
<td>
<span class="cd_chkLab"><input id="" type="checkbox" name="ctl00$MainContent$rptConventionals$ctl02$ctl00" /></span><span>Total Suspended Solids, Total</span>
</td>
</tr>
</table>

Answer

By default Label control is rendered as span HTML element. It is only when this control has a property AssociatedControlID set that it renders as actual label.

You do not have this property set, so querying for label won't give you anything at all. You need to query for span:

wholeString = $(this).next('span').text();