Question

我在后面的代码中加载了checkboxlist的listitems，如下所示;

'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代码隐藏中设置了第一个checkboxlist项，你不能在那里设置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();

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

1 个答案: