JQuery的：獲取每個項目在單選按鈕列表

Question

我有一個asp:RadioButtonList時動態填充：

<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> 

每當選定的價值的變化，我想通過列表中的每個項目運行，並改變的背景顏色嵌套跨度（類別qcode）。問題是each只返回整個單選按鈕列表本身（$(this)映射到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'); 
     } 
    }); 
}); 

我在做什麼錯在這裏？

編輯

的jQuery移動生成的HTML是巨大的，但我會添加一些位，這樣每個人都可以得到的產生什麼是一個想法：

<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

我找到了解決runat=server問題的方法。

protected void Page_Load(object sender, System.EventArgs e) 
{ 
    if (IsPostBack) 
     foreach (ListItem li in RadioButtonList1.Items) 
      li.Attributes.Add("onchange","SetTextValues()"); 
} 

我現在需要的是一種方式來獲得一個單選按鈕列表（$('#RadioButtonList1').each()線）每一個項目，這樣我就可以改變嵌套跨度的顏色

Answer 1

的runat="server"屬性迫使你的網頁每次發生類似onselectedindexchanged的事件時都會刷新。此刷新覆蓋了jQuery可以對$('#RadioButtonList1').change() jQuery函數中的子元素執行的任何操作。

要麼在serverSide事件觸發時更改顏色，要麼刪除runat屬性和RadioButtonList1_SelectedIndexChanged serverSide事件並通過$ .change（）jQuery函數管理所有事件。

Answer 2

試試這個，讓我知道你是否仍然有問題。

 $(document).ready(function() { 
      $('#RadioButtonList1 input').change(function() { 
       $('#RadioButtonList1 input').each(function() { 
        if ($(this).is(':checked')) { 
         $(this).closest("qcode").children().css('background-color', '#E9E9E9'); 
        } else { 
         $(this).closest("qcode").children().css('background-color', '#3388cc'); 
        } 
       }); 
      }); 
     });