jquery向下鑽取版本2

從我的aspx頁面輸出以下HTML輸出，其中顯示一個checkboxlist;jquery向下鑽取版本2

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

來源

2012-05-20 dinotom

試試這個

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

來源

2012-05-20 23:01:56

嗯，我不能把它放在這裏，因爲它太長了... .is（「：checked」）行假設沒有檢查複選框列表中的複選框。 ..（「＃cbxArea input [type = checkbox]」）。each（function（）{（this）.is（「：checked」）; $（this）.siblings（「label」）。toggleClass（「選擇」）; }）; – dinotom

以及更改您的代碼 - $（「＃cbxArea input [type = checkbox]：checked」）。each（function（）{$（this）.siblings（「label」）。toggleClass（「selected」）;}）; –

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

FIDDLE

遍歷所有的人，做：

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

來源

2012-05-20 22:40:17 adeneo

這是行不通的。這會起作用，它會更改列表中每個選定項目的文本顏色。當單獨選中所有複選框時，將使用此選項。我無法得到複選框列表（其中有5個項目）單獨更改文本顏色..... $（'＃ChartstoDisplay'）。each（function（）{（'label'）。toggleClass（「selected」）; }）; – dinotom

adeneo，謝謝你，我看到它在小提琴中效果很好，但它不適用於我的實際頁面。 – dinotom

您正在遍歷一個ID，ID是唯一的，並且'＃ChartstoDisplay'中沒有每個ID，它只是一個表格元素。嘗試更好地解釋，你必須每次檢查所有的框，或者你只是想要一個按鈕來檢查他們所有？爲什麼它不能在你的頁面上工作很難爲其他人診斷，你將不得不在控制檯（F12）中查找錯誤等。 – adeneo

jquery向下鑽取版本2

回答

相關問題