Jquery在同一行上按类名查找包含Checkbox的单元格

时间:2014-04-23 20:59:20

标签: jquery

大家好,并提前致谢,

我一直在查看一些关于如何使用Jquery查找元素的SO文章,但我编写的所有变体都没有起作用。所以这就是我想要完成的事情,我有一个gridview,它有一个可以点击的链接按钮和一个包含在具有类名的分区中的复选框。单击链接按钮时,它会调用Jquery函数,如下所示:

 <asp:LinkButton ID="Remove" runat="server" Text="X" OnClientClick='RemovePerson(this,ID)' Style="color: maroon; font-weight: bold;"></asp:LinkButton>

该功能本身就是:

 RemovePerson(lnk, id) {
    //find the checkbox here and uncheck it
 }

我尝试过以下方法:

var cb = $(this).closest('.tblBox').find('input[type="checkbox"]');
var cb = $(this).find('.tblBox > input[type="checkbox"]');
var cb = $(this).parent().find('td:last-child input[type="checkbox"]');

如果我尝试使用&#39; lnk&#39;而不是$(this)然后页面出错了,所以我不确定我的问题是否是我通过了这个&#39;这个&#39;错误或者如果我使用最近或发现错误或全部以上。在这一行上修复复选框的正确方法是什么?

更新:这是渲染的gridview的标记。

 <table class="TableFormat fixWidth" cellspacing="0" rules="all" border="1" id="gvPOCWarden" style="border-collapse:collapse;">
   <tr>
  <th scope="col">&nbsp;</th>
      <th scope="col">Name</th>
      <th scope="col">Id</th>
      <th scope="col">Phone</th>
      <th scope="col">Email</th>
      <th scope="col">Emails</th>
      <th scope="col">Add Role</th>
    </tr>
    <tr>
   <td align="center">
      <a onclick="RemovePerson(this,&#39;RWgB/tFwYfU=&#39;);" id="lnkRemove" href="javascript:__doPostBack(&#39;ctl00$ctl00$MasterContentPlaceHolder$TabsMainContentPlaceHolder$gvPersons$ctl02$lnkRemove&#39;,&#39;&#39;)" style="color: maroon; font-weight: bold;">X</a>
    </td>
        <td>Name 1</td>
        <td>N42</td>
        <td>5686698542</td>
        <td><span id="lblEmail">name1@mail.com</span></td>
        <td align="center">                                
            <div class="pocBox">
       <input id="cbEmail" type="checkbox" name="ctl00$ctl00$MasterContentPlaceHolder$TabsMainContentPlaceHolder$gvPersons$ctl02$cbEmail" checked="checked" /><label for="cbEmail">RWgB/tFwYfU=</label>
    </div>
         </td>
         <td align="center">
    <div class="tblBox">
        <input id="cbRole" type="checkbox" name="ctl00$ctl00$MasterContentPlaceHolder$TabsMainContentPlaceHolder$gvPersons$ctl02$cbRole" checked="checked" onclick="UncheckOtherPerson(this,&#39;RWgB/tFwYfU=&#39;);" /><label for="cbRole">RWgB/tFwYfU=</label>
    </div>
          </td>
  </tr>
   </table>

1 个答案:

答案 0 :(得分:0)

我试图设置一个jsfiddle来测试它,但是我找不到语法错误。所以我冒昧地设置了一个删除内联JavaScript的jsfiddle,只采用jQuery方法 - http://jsfiddle.net/jayblanchard/6mwW5/

$('table a').click(function() {
    $(this).closest('tr').find('td div input:checkbox').prop('checked', false);
});

这是通用的,适用于表中的所有行。 注意:确保标记中的所有ID都是唯一的,特别是如果您要将它们用于某些内容时。如果你决定在一个函数中使用它们,你将获得时髦的结果。

正如我所说的,我删除了内联JavaScript,但我添加了data-id来替换调用RemovePerson中的id值 -

<td align="center">
    <a data-id="&#39;RWgB/tFwYfU=&#39;" id="lnkRemove" href="#" style="color: maroon; font-weight: bold;">X</a>
</td>

我希望这会有所帮助。如果您有任何问题,请与我们联系。