jQuery - update text in div on radiobutton change

Question

I'm using ASP.Net Radiobutton lists for my layout and have multiple sets in separate divs. Each set has a title div above it which I'm trying to update when the radiobutton selection changes.

I know this is down to not picking up the correct div, but not sure how best to do it without explicitly naming all of them.

The .Net Radiobuttonlist renders out as radio buttons inside an unordered list if that makes a difference.

var rbl1 = $("#<%=rbl1.ClientID %> input");
var rbl2 = $("#<%=rbl2.ClientID %> input");

rbl1.add(rbl2).bind("change", function () {
    var idVal = $(this).attr("id");
    var lbltext = $("label[for='" + idVal + "']").text();
    $(this).parents().find('.header:first').text(lbltext);
    var UpdatePanel1 = '<%=imgPanel.ClientID%>';
    __doPostBack(UpdatePanel1, '');
});

<div class="holder">
    <div class="header">TITLE HERE</div>
    <asp:RadioButtonList ID="rbl1" runat="server" RepeatLayout="UnorderedList"
    RepeatDirection="Vertical" CssClass="selector" />
</div>

<div class="holder">
    <div class="header">TITLE HERE</div>
    <asp:RadioButtonList ID="rbl2" runat="server" RepeatLayout="UnorderedList"
    RepeatDirection="Vertical" CssClass="selector" />  
</div>

When one of the radiobutton collections is changed I want the corresponding header class div to change text to the radiobutton that is selected. At the moment as I have it, it changes the very first one, no matter which set of radiobuttons I click on - so changing one in the second set changes both header class divs.

Answer 1

You can find the sibling header-div with siblings-method (or with closest(".holder").find(".header")):

$(".holder :radio").on("change", function () {
    var idVal = $(this).attr("id");
    var lbltext = $("label[for='" + idVal + "']").text();
    $(this).siblings(".header").text(lbltext);
    var UpdatePanel1 = '<%=imgPanel.ClientID%>';
    __doPostBack(UpdatePanel1, '');
});

Also you should use on-method instead of bind in jQuery. And you could make the selector easier as above.

Edit: Not sure how Asp.Net renders the radiobuttonlist, might wrap it in div or something. Then the header-div is not sibling to the radiobutton. If that is the case use the closest alternative I mentioned.