jquery向下钻取版本2

给定my 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>

我也试过这种方法

 $('#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");
                  });
              }
          });
  });

要遍历所有这些对象，请执行以下操作：

$('[id^="ChartstoDisplay_"]').on('change', function () {
    $('[id^="ChartstoDisplay_"]').each(function(i,e) {
        $(this).next('label')[$(this).prop('checked')?'addClass':'removeClass']("selected");
    });
});​

试试这个

$("#cbxArea input[type=checkbox]").change(function(){
   $(this).siblings("label").toggleClass("selected");
});

---

这是行不通的。这样做有效，它会更改列表中每个选定项的文本颜色。选中单独的“全选”复选框时使用此选项。我无法获取复选框列表（其中包含5项）以单独更改文本颜色….$（'ChartstoDisplay'）。每个（函数（）{$（'label'）。切换类（“选定”）；}）；adeneo，谢谢我看到它在小提琴上很好用，但在我的实际页面上不起作用。你在一个ID上迭代，ID是唯一的，并且没有每个ID用于

#ChartstoDisplay

，它只是一个表元素。试着更好地解释，你是每次都要检查所有的框，还是只需要一个按钮来检查所有的框？？？为什么它不在你的页面上工作很难为其他人诊断，你必须在控制台（F12）中查找错误等。有一个id为ChartstoDisplayAll的复选框，当选中该复选框时，它应该做三件事，1。显示默认为不可见的按钮，2。通过.selected类和3将其文本颜色更改为粗体绿色。选中其下方复选框列表中的所有复选框（5项），并将其文本也设为绿色粗体。我有前两个正在工作，第3项我不知道。。。下面是完成第1项和第2项$（文档）的脚本.ready（函数（）{$（$）（$）.change（函数（）{if（$（$）（$）（ChartstoDisplayAll'））.is（'：checked'））{$（this.next（）.addClass（“selected”）；$（$）.addClass（“buttonshow”）.removeClass（'buttonshide'）；}其他{$（'#buttons'）.addClass（“buttonshide”）.removeClass（“buttonsshow”）；$（this.next（）.removeClass（“selected”）；}}）；我不能把它放在这里，因为它太长了…是（“：checked”）我假设的行没有选中复选框列表中的复选框…$（“#cbxArea input[type=checkbox]”。每个（函数（）{$（this）.is（“：checked”）；$（this）.兄弟姐妹（“label”）.toggleClass（“selected”）；}）；我们将代码更改为--$（“#cbxArea input[type=checkbox]：checked“）.each（函数（）{$（this）.sibles（“标签”）.toggleClass（“选定”）；}）；

$('[id^="ChartstoDisplay_"]').on('change', function () {
    $('[id^="ChartstoDisplay_"]').each(function(i,e) {
        $(this).next('label')[$(this).prop('checked')?'addClass':'removeClass']("selected");
    });
});​

$("#cbxArea input[type=checkbox]").change(function(){
   $(this).siblings("label").toggleClass("selected");
});