jquery - 从后面的代码加载时将复选框设置为选中状态

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"));

          });              
      });

并且效果非常好。但是，我将第一个复选框列表项设置为在 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();

请注意，如果您的复选框是静态的，则无需使用事件委托(delegate)。

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