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，因为这也将处理取消选中。

编辑确定试试这个以进行初始化：

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

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

2 个答案: