javascript - JQuery: Get each item in RadioButtonList -

javascript - JQuery: Get each item in RadioButtonList -

i have asp:radiobuttonlist filled dynamically:

<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal" data-role="controlgroup" data-mini="true"> <asp:radiobuttonlist id="radiobuttonlist1" runat="server" onselectedindexchanged="radiobuttonlist1_selectedindexchanged" repeatlayout="table" cssclass="radiolistrepeatcolumn" clientidmode="static"></asp:radiobuttonlist> </fieldset> </div>

whenever selected value changes, want run through each item in list, , alter background color of nested span (class qcode). problem each returns whole radio button list ($(this) maps radiobuttonlist1).

$('#radiobuttonlist1').change(function () { $('#radiobuttonlist1').each(function () { if ($(this).is(':checked')) { $(this).children('qcode').css('background-color', '#e9e9e9'); } else { $(this).children('qcode').css('background-color', '#3388cc'); } }); });

what doing wrong here?

edit

the html generated jquery mobile massive, add together bits can thought of beingness generated:

<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" class="ui-controlgroup ui-controlgroup-horizontal ui-corner-all ui-mini"> <div class="ui-controlgroup-controls "> <table id="radiobuttonlist1" class="radiolistrepeatcolumn" onkeydown="return didyouhitenter(event);" border="0"> <tbody><tr> <td><span onchange="settextvalues();"><div class="ui-radio ui-mini"><label for="radiobuttonlist1_0" class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off ui-first-child"><span class="qcode">1</span>&nbsp;&nbsp;<span class="qcodetext">text</span></label><input id="radiobuttonlist1_0" type="radio" name="_ctl0:mainbodyplaceholder:nightstot:radiobuttonlist1" value="31:31" onclick="settextvalues();"></div></span></td> </tr><tr> <td><span onchange="settextvalues();"><div class="ui-radio ui-mini"><label for="radiobuttonlist1_1" class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off"><span class="qcode">2</span>&nbsp;&nbsp;<span class="qcodetext">text</span></label><input id="radiobuttonlist1_1" type="radio" name="_ctl0:mainbodyplaceholder:nightstot:radiobuttonlist1" value="32:32" onclick="settextvalues();"></div></span></td> </tr><tr> <td><span onchange="settextvalues();"><div class="ui-radio ui-mini"><label for="radiobuttonlist1_2" class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off"><span class="qcode">3</span>&nbsp;&nbsp;<span class="qcodetext">text</span></label><input id="radiobuttonlist1_2" type="radio" name="_ctl0:mainbodyplaceholder:nightstot:radiobuttonlist1" value="33:33" onclick="settextvalues();"></div></span></td> </tr><tr> <td><span onchange="settextvalues();"><div class="ui-radio ui-mini"><label for="radiobuttonlist1_3" class="ui-btn ui-corner-all ui-btn-inherit ui-radio-off"><span class="qcode">4</span>&nbsp;&nbsp;<span class="qcodetext">text</span></label><input id="radiobuttonlist1_3" type="radio" name="_ctl0:mainbodyplaceholder:nightstot:radiobuttonlist1" value="34:34" onclick="settextvalues();"></div></span></td> </tbody></table> </div> </fieldset>

edit 2

i have found way work around runat=server issue.

protected void page_load(object sender, system.eventargs e) { if (ispostback) foreach (listitem li in radiobuttonlist1.items) li.attributes.add("onchange","settextvalues()"); }

what need way every item in radiobuttonlist ($('#radiobuttonlist1').each() line), can alter colors of nested span

the runat="server" attribute forces web page create refresh every time event onselectedindexchanged fired. refresh overrides jquery on kid elements in $('#radiobuttonlist1').change() jquery function.

either alter color @ serverside when serverside event fired or remove runat attribute , radiobuttonlist1_selectedindexchanged serverside event , manage $.change() jquery function.

javascript jquery asp.net jquery-mobile