On clicking parent checbox , the child checkboxes gets selected

I have a dynamic grid. The structure of the grid is as follows:

Serial No                  Document Name       Attachment
1(checkbox)                  abc               (img)
2(checkbox)                   xyz               (img)
3(checkbox)                   uio               (img)
4(checkbox)                   pop               (img)

Against every serial number there is a checkbox. And in attachment column when you click the image it opens a dialog box which shows the documents attached against this document. Each attachment also has a checkbox against it.

This dialog box is another table and comes from another dynamic grid.

What I want to do is that when selecting the first checkbox which is against the first serial number(1) I want the checkboxes in the same dialog to be checked as well. And if the user selects checkbox against serial number and then click on that dialog box against that serial number and uncheck all checkboxes then the checkbox against serial number 1 should also be unchecked.

I tried doing this using the closet table function.

Below is the code

    $('.activity_selection').live('click', function (e) {
        var table = $(e.target).closest('table');
        $('td input:checkbox', table).attr('checked', e.target.checked);

    }); 

.activity_selection is a class that I have given to checkboxes against serial numbers. But it selects all the checkboxes against all serial numbers that is 1 to 4. What I want is that it checks only checkboxes in the current dialog box? How can I achieve this using javascript or jquery? I have many other sample code but it did not work. Please help.

Html of the main grid:

<table class="display" width="100%" id="uploadGrid">
  <thead>
    <tr>
      <th class="Greyheader"><input type='checkbox' id='selectAll'>
        <br/>S.No</th>
      <th class="Greyheader">Document Name</th>
      <th class="Greyheader">Browse</th>
      <th class="Greyheader">Attachment</th>
      <th class="Greyheader">Save</th>
    </tr>
  </thead>
  <tr id="517" cdCode="41701" mandatory="N">
    <td class="GreyBorder">1&nbsp;&nbsp;
      <input type='checkbox' id=chk_517 class='activity_selection'> </td>
    <td class="GreyBorder"><span>Letter</span> </td>
    <td class="GreyBorder" style=" text-align:center !important;"> <input type="file" multiple="multiple" name="txt_filePath_517" class="mediumTextField" id="txt_filePath_517" style="width: 78%;">
    </td>
    <td class="GreyBorder" style=" text-align:center !important;" align="center"><span style="cursor:hand"><span 
class="attch_counter">2</span><img title="Attachment" height="20px" onclick="AttchmentBox('_41701','2',this);" src="../../Images/attchments.png" /></span>
    </td>
    <td class="GreyBorder" align="center"><img type="image" title="Save" src="../../Images/save.png" id="Btn_517" onclick="SaveAttachment('517','41701','50818','50595');" style="cursor:pointer;height:15px;" class="AddItem" /></td>
  </tr>
  <tr id="518" cdCode="41702" mandatory="N">
    <td class="GreyBorder">2&nbsp;&nbsp;<input type='checkbox' id=chk_518 class='activity_selection'> </td>
    <td class="GreyBorder">
      <span>Customer</span> </td>
    <td class="GreyBorder" style=" text-align:center !important;"> <input type="file" multiple="multiple" name="txt_filePath_518" class="mediumTextField" id="txt_filePath_518" style="width: 78%;">
    </td>
    <td class="GreyBorder" style=" text-align:center !important;" align="center"><span style="cursor:hand"><span 
 class="attch_counter">1</span><img title="Attachment" height="20px" onclick="AttchmentBox('_41702','1',this);" src="../../Images/attchments.png" /></span>
    </td>
    <td class="GreyBorder" align="center"><img type="image" title="Save" src="../../Images/save.png" id="Btn_518" onclick="SaveAttachment('518','41702','50818','50595');" style="cursor:pointer;height:15px;" class="AddItem" /> </tr>
</table>