3

我在后面的代码中加载复选框列表的列表项，如下所示；

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

1 回答 1

2

您应该在选择器之间使用空格，而且您没有选择同级标签元素。

$("#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();
于 2013-02-03T16:40:05.507 回答