检查是不是使用 jQuery 检查了复选框，然后将一个类添加到最近的 td
Posted
技术标签:
【中文标题】检查是不是使用 jQuery 检查了复选框，然后将一个类添加到最近的 td【英文标题】：check if checkbox is checked using jQuery then add a class to the closest td检查是否使用 jQuery 检查了复选框，然后将一个类添加到最近的 td 【发布时间】：2012-05-29 08:22:47 【问题描述】：我正在使用 ASP.NET，我有一个带有复选框元素的 gridview，我想检查是否选中了复选框，将一个类添加到可以将背景颜色更改为黑色的 clossest 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('_ctl0$Corps$DossierGV','Sort$ID_Dossier')">ID_Dossier</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$ID_Entreprise')">ID_Entreprise</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Date_Depot')">Date_Depot</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Type_Etude')">Type_Etude</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Dernier_Type')">Dernier_Type</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Eligibile')">Eligibile</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Fiche_Information')">Fiche_Information</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Buletin_Adhesion')">Buletin_Adhesion</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Fiche_Renseignment')">Fiche_Renseignment</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Attestation')">Attestation</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$ID_Cabinet')">ID_Cabinet</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Montant_Demander')">Montant_Demander</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Duree')">Duree</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Porcentage_Taux')">Porcentage_Taux</a></th><th scope="col"><a href="javascript:__doPostBack('_ctl0$Corps$DossierGV','Sort$Nom_Giac')">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>
【问题讨论】：
阅读该源代码有点困难，但是您实际上只有一个复选框吗？这是它应该的方式吗？另外，你想只将 css 应用到下一个单元格还是整行？ 您的复选框选择器错误。试试$("input[type='checkbox']").closest('td').addClass("OnSelectTr");
@Fabrício Matté 我想在整行中应用 css，是的，在我的页面中，我只有网格视图中的复选框
@mattytommo $(':checkbox') 是$("[type='checkbox']") 的简写，但你是对的，它应该是小写的。
@mattytommo 我确实尝试过你的方法，但我遇到了同样的问题.. 什么都没发生
【参考方案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。
【讨论】：
tnkks @Fabrício Matté fr 你的帮助，但不幸的是.. 钢铁也遇到了同样的问题 :'( 具体的“问题”是什么？没有添加课程？您是否在控制台中收到任何错误？ 在第 198 行的 mozilla firefox 控制台中没有发生错误 .. 我有复选框元素的地方 您在页面中使用的是什么版本的 JQuery？如果 JQuery .on 替换为.live。如果这不起作用，那么其他东西可能会破坏您的代码，至于您隔离生成的 html，无论何时生成复选框，我的函数都将起作用（您甚至可以即时添加更多）。确保正确包含 JQuery 库，如果没有错误，我看不出这是如何工作的。也许开始将您的代码剥离（注释）到最低限度并检查它是否有效。
yes yes dudde 这是当我将 .live 转为 .on 并将 j-query 的版本从 1.4 更改为 1.7 时，问题就解决了
【参考方案2】：
我看不到您在哪里调用该 JS，但我感觉选择器不太正确。我会将它添加为复选框上的 onchange 事件，然后将选择器更改为：
$(this).closest('td').addClass("OnSelectTr");
您可能还想将 addClass 更改为 toggleClass，因为这也将处理取消选中。
编辑好试试这个初始化：
$(document).ready(function ()
$("checkbox").change(function () $(this).closest('td').addClass("OnSelectTr"); );
);
【讨论】：
$(document).ready(function () $(":CheckBox").closest('td').addClass("OnSelectTr"); ); 啊，您正在做的是在页面加载时将类添加到所有复选框。可能不是您想要的行为，我编辑了答案以正确绑定到复选框的更改事件。 我确实尝试过你的方法，但我遇到了同样的问题:'( tnks Parco以上是关于检查是不是使用 jQuery 检查了复选框，然后将一个类添加到最近的 td的主要内容，如果未能解决你的问题，请参考以下文章