0

チェックボックスリストを表示するaspxページからの次のHTML出力を考えます。

 <div id="selectContainer" class="wrapper" >

    <div id="cbxArea" class="checkbox">

       <table id="ChartstoDisplay" style="border-color:DimGray;border-width:2px;border-style:Solid;width:300px;">

<tr>

    <td><input id="ChartstoDisplay_0" type="checkbox" name="ctl00$MainContent$ChartstoDisplay$ChartstoDisplay_0" value="Selected Year Cumulative P/L" /><label for="ChartstoDisplay_0">Selected Year Cumulative P/L</label></td>

</tr><tr>

    <td><input id="ChartstoDisplay_1" type="checkbox" name="ctl00$MainContent$ChartstoDisplay$ChartstoDisplay_1" value="Month by Month P/L for selected year" /><label for="ChartstoDisplay_1">Month by Month P/L for selected year</label></td>

</tr><tr>

    <td><input id="ChartstoDisplay_2" type="checkbox" name="ctl00$MainContent$ChartstoDisplay$ChartstoDisplay_2" value="All Commodities P/L for selected year" /><label for="ChartstoDisplay_2">All Commodities P/L for selected year</label></td>

</tr><tr>

    <td><input id="ChartstoDisplay_3" type="checkbox" name="ctl00$MainContent$ChartstoDisplay$ChartstoDisplay_3" value="Current Month&#39;s P/L by Commodity" /><label for="ChartstoDisplay_3">Current Month's P/L by Commodity</label></td>

</tr><tr>
</div>
</div>

選択したアイテムのクラスを変更しようとしています。jqueryでクラスを変更する適切なオブジェクトを見つけるのに問題があります。これが私の最新のイテレーションです。

 $('#ChartstoDisplay').change(
          function () {
              $('#ChartstoDisplay').each(function () {
                 $(this).is(':checked').$('label').toggleclass("selected");
              });
          });

私もこの方法を試しました

 $('#ChartstoDisplay').change(
          function () {
              $('#ChartstoDisplay').each(function () {
                 $(this).is(':checked').$('label').attr.add('style',"color:darkgreen;");
              });
          });

これが完全に機能する完成したスクリプトです

 //this script will change the style of the "Select All" checkbox and make visible the "Build Chart" button
  $(document).ready(function () {
      $('#ChartstoDisplayAll').change(
          function () {
              if ($('#ChartstoDisplayAll').is(':checked')) {
                  $(this).next().addClass("selected");
                  $('#buttons').addClass("buttonsshow").removeClass('buttonshide');
                  $("#cbxArea input[type=checkbox]").each(function () {
                      $(this).prop("checked", true);
                      $(this).siblings("label").toggleClass("selected");
                  });
              } else {
                  $('#buttons').addClass("buttonshide").removeClass('buttonsshow');
                  $(this).next().removeClass("selected");
                  $("#cbxArea input[type=checkbox]").each(function () {
                      $(this).prop("checked", false);
                      $(this).siblings("label").removeClass("selected");
                  });
              }
          });
  });
4

2 に答える 2

1

これを試して

$("#cbxArea input[type=checkbox]").change(function(){
   $(this).siblings("label").toggleClass("selected");
});
于 2012-05-20T23:01:56.577 に答える
0 
$('[id^="ChartstoDisplay_"]').on('change', function() {
  $(this).next('label')[$(this).prop('checked')?'addClass':'removeClass']("selected");
});

フィドル

それらすべてを反復するには、次のようにします。

$('[id^="ChartstoDisplay_"]').on('change', function () {
    $('[id^="ChartstoDisplay_"]').each(function(i,e) {
        $(this).next('label')[$(this).prop('checked')?'addClass':'removeClass']("selected");
    });
});​
于 2012-05-20T22:40:17.947 に答える