检查是否使用 jQuery 选中复选框，然后将类添加到最近的 TD

check if checkbox is checked using jQuery then add a class to the closest td

本文关键字：添加 最近 TD 然后 是否 jQuery 复选框 检查      更新时间：2023-09-26

我正在使用 ASP.NET，我有一个带有复选框元素的网格视图，我想检查复选框是否被选中 向closst 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>

由于您已指定应将类添加到整行中，因此可以尝试以下操作：

$(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 。

我看不到你在哪里调用那个 JS，但我有一种感觉选择器不太正确。我会在复选框上将其添加为 onchange 事件，然后将选择器更改为：

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

您可能还希望将addClass更改为toggleClass，因为这也将处理取消选中。

编辑好的尝试这个来启动：

$(document).ready(function () {
     $("checkbox").change(function () { $(this).closest('td').addClass("OnSelectTr"); });
});
相关文章：