設置複選框爲從後面的代碼加載時選擇

Question

我正在加載複選框列表的代碼後面的代碼如下;

'load the fuel types into the checklist box 
    For Each newitem As String In GetFuelTypes(Request.PhysicalApplicationPath & "OtherDataFiles\dataXML.xml") 
     cblFuelstoDisplay.Items.Add(New ListItem(newitem)) 
    Next 

我使用下面的jquery來改變CSS樣式，當一個項目被選中;

$(document).ready(function() { 
      $("#cbxarea").on("change", ":checkbox", function() { 
       $(this).siblings("label").toggleClass("checkboxselected", $(this).is(":checked")); 

      });    
     }); 

和完美的作品fine.BUT，我設置了第一的CheckBoxList項目如ASPX代碼隱藏選定，你不能設置css樣式出現。如何在doc.ready之後更改jquery中的頁面加載樣式？ 我嘗試添加這劇本，但它沒有工作

$("#cbxarea:checkbox").each(function() { 
       if($(this).is(":checked")) { 
        $(this).toggleClass("checkboxselected"); 
       } 
      }); 

這裏是複選框標記

<fieldset style="height:140px;"> 
       <legend>Select a Fuel Type to Display</legend> 
       <div id="cbxarea" class="checkbox"> 
        <asp:CheckBoxList ID="cblFuelstoDisplay" runat="server" AutoPostBack="True" >    
        </asp:CheckBoxList> 
       </div>    
      </fieldset> 

Answer 1

你應該選擇之間使用空間，你也沒有選擇兄弟標籤要素。

$("#cbxarea input[type=checkbox]:checked") 
          .siblings('label') 
          .addClass("checkboxselected"); 

您也可以觸發這種改變事件：

$("#cbxarea").on("change", "input[type=checkbox]", function() { 
    $(this).siblings("label").toggleClass("checkboxselected", this.checked); 
}).change(); 

請注意，如果您的複選框是靜態的，沒有必要使用事件委託。

$("#cbxarea input[type=checkbox]").on("change", function() { }).change();