檢查是否使用jQuery檢查復選框，然后將類添加到最近的td

Question

我正在使用ASP.NET，我有一個帶有復選框元素的gridview，我想檢查復選框是否已選中將一個類添加到最關閉的td，可以將背景顏色更改為黑色

我使用它但它不起作用：

Js（（品嘗目的））：

    $(document).ready(function () {

    $(":CheckBox").closest('td').addClass("OnSelectTr");
});

CSS：

.OnSelectTr
{
    background-color:Black;
}

ASP.NET代碼：

<asp:GridView ID="DossierGV" runat="server" AllowPaging="True" 
                            AllowSorting="True" DataSourceID="DossierPF" AutoGenerateColumns="False" 
                            DataKeyNames="ID_Dossier">
                          <Columns>
                              <asp:TemplateField HeaderText="Choisir">
                                  <EditItemTemplate>
                                      <asp:CheckBox ID="CheckBox1" runat="server" />
                                  </EditItemTemplate>
                                  <ItemTemplate>
                                      <asp:CheckBox ID="CheckBox1" runat="server" />
                                  </ItemTemplate>
                              </asp:TemplateField>
                              <asp:BoundField DataField="ID_Dossier" HeaderText="ID_Dossier" ReadOnly="True" 
                                  SortExpression="ID_Dossier" />
                              <asp:BoundField DataField="ID_Entreprise" HeaderText="ID_Entreprise" 
                                  SortExpression="ID_Entreprise" />
                              <asp:BoundField DataField="Date_Depot" HeaderText="Date_Depot" 
                                  SortExpression="Date_Depot" />
                              <asp:BoundField DataField="Type_Etude" HeaderText="Type_Etude" 
                                  SortExpression="Type_Etude" />
                              <asp:BoundField DataField="Dernier_Type" HeaderText="Dernier_Type" 
                                  SortExpression="Dernier_Type" />
                              <asp:BoundField DataField="Eligibile" HeaderText="Eligibile" 
                                  SortExpression="Eligibile" />
                              <asp:BoundField DataField="Fiche_Information" HeaderText="Fiche_Information" 
                                  SortExpression="Fiche_Information" />
                              <asp:BoundField DataField="Buletin_Adhesion" HeaderText="Buletin_Adhesion" 
                                  SortExpression="Buletin_Adhesion" />
                              <asp:BoundField DataField="Fiche_Renseignment" HeaderText="Fiche_Renseignment" 
                                  SortExpression="Fiche_Renseignment" />
                              <asp:BoundField DataField="Attestation" HeaderText="Attestation" 
                                  SortExpression="Attestation" />
                              <asp:BoundField DataField="ID_Cabinet" HeaderText="ID_Cabinet" 
                                  SortExpression="ID_Cabinet" />
                              <asp:BoundField DataField="Montant_Demander" HeaderText="Montant_Demander" 
                                  SortExpression="Montant_Demander" />
                              <asp:BoundField DataField="Duree" HeaderText="Duree" SortExpression="Duree" />
                              <asp:BoundField DataField="Porcentage_Taux" HeaderText="Porcentage_Taux" 
                                  SortExpression="Porcentage_Taux" />
                              <asp:BoundField DataField="Nom_Giac" HeaderText="Nom_Giac" 
                                  SortExpression="Nom_Giac" />
                          </Columns>
                      </asp:GridView>

導航器中的代碼源：

<div class="GridViewDiv">

              <div id="Corps_DossierUpdatePanel">
                      <div>

        <table cellspacing="0" rules="all" border="1" id="Corps_DossierGV" style="border-collapse:collapse;">

            <tr>
                <th scope="col">Choisir</th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Dossier&#39;)">ID_Dossier</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Entreprise&#39;)">ID_Entreprise</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Date_Depot&#39;)">Date_Depot</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Type_Etude&#39;)">Type_Etude</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Dernier_Type&#39;)">Dernier_Type</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Eligibile&#39;)">Eligibile</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Fiche_Information&#39;)">Fiche_Information</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Buletin_Adhesion&#39;)">Buletin_Adhesion</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Fiche_Renseignment&#39;)">Fiche_Renseignment</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Attestation&#39;)">Attestation</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$ID_Cabinet&#39;)">ID_Cabinet</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Montant_Demander&#39;)">Montant_Demander</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Duree&#39;)">Duree</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Porcentage_Taux&#39;)">Porcentage_Taux</a></th><th scope="col"><a href="javascript:__doPostBack(&#39;_ctl0$Corps$DossierGV&#39;,&#39;Sort$Nom_Giac&#39;)">Nom_Giac</a></th>

            </tr><tr>

                <td>

                                      <input id="Corps_DossierGV_CheckBox1_0" type="checkbox" name="_ctl0:Corps:DossierGV:_ctl2:CheckBox1" />

                                  </td><td>3</td><td>4</td><td>10/12/2011 00:00:00</td><td>DS</td><td>IN</td><td>oui</td><td>oui</td><td>oui</td><td>oui</td><td>oui</td><td>1</td><td>1000,00</td><td>10</td><td>70</td><td>GIAC1-IMME</td>

            </tr>

        </table>

    </div>



</div>

Answer 1

由於您已指定應將類添加到整行，因此您可以嘗試：

$(document).ready(function(){
    $(':checkbox').on('change', function(){
        if ($(this).attr('checked'))
            $(this).parents('tr').addClass('OnSelectTr');
        else
            $(this).parents('tr').removeClass('OnSelectTr');
    });
});​

的jsfiddle

每當復選框的值改變時，它將綁定要調用的函數，根據檢查的值添加或刪除其父tr的類。

請注意.on僅在JQuery 1.7+中受支持，舊版本將.on替換為.live 。

Answer 2

我無法看到你在調用JS的位置，但我感覺選擇器不太正確。 我會在復選框上將其添加為onchange事件，然后將選擇器更改為：

$(this).closest('td').addClass("OnSelectTr");

您也可能希望將addClass更改為toggleClass，因為這也將處理取消選中。

編輯確定嘗試這個initalizing：

$(document).ready(function () {
     $("checkbox").change(function () { $(this).closest('td').addClass("OnSelectTr"); });
});