td中有复选框 如何点击td内的任意位置就选中复选框？

Posted 2023-05-17

参考技术A 你好！
这个是根据你自己写代码的时候所写的，一般来说是你选中哪个框就是哪个，如果是一个整体的话就是点击任意位置都会选中复选框的。
希望能够帮到你！追问

如何弄成整体  请举例  <html:multibox

追答

就是你做tb的时候加上一个复选框放在这个表格外面，你可以搜搜网上tb表格的代码就会有很多的。

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

【中文标题】检查是不是使用 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(&#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>

【问题讨论】：

阅读该源代码有点困难，但是您实际上只有一个复选框吗？这是它应该的方式吗？另外，你想只将 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