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

change イベントをトリガーすることもできます。

$("#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 に答える