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

Question

Hi all and thanks in advance,

I've been looking at a number of the SO articles about how to find elements using Jquery but none of the variations I have concocted are working. So here's what I'm trying to accomplish, I have a gridview that has a link button that can be clicked and a check box that is wrapped in a division with a class name. When the link button is clicked it calls a Jquery function like so:

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

The function itself is just:

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

I've tried the following:

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"]');

If I try to use 'lnk' instead of $(this) then the page errs out so I'm not certain if my problem is I'm passing 'this' wrong or if I'm using closest or find incorrectly or all of the above. What is the correct way to fix the check box on just this one row?

UPDATE: This is the markup of the rendered 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>

Answer 1

I tried to setup a jsfiddle to test this but there are syntax errors that I cannot locate. So I took the liberty of setting up a jsfiddle that removes inline JavaScript and just take a jQuery approach - http://jsfiddle.net/jayblanchard/6mwW5/

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

This is generic and will work for all rows in the table. CAUTION: make sure that all ID's in your markup are unique, especially if you're going to use them for something. If you decide to use them in a function you will get funky results.

As I said, I removed the inline JavaScript, but I added a data-id to replace the the id value that had been in the call to RemovePerson -

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

I hope that this helps. Please let me know if you have any questions.