How to check all checkboxes on selecting parent checkbox in a nested grid that opens on an onclick function

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 the attachment column when you click the image it opens a dialog box that shows the files attached against this document name. Each attachment also has a checkbox against it.

This dialog box opens on an on click function and comes from another dynamic grid.

What I want to do is that if I select checkbox against serial no 1, it should check all checkboxes in the dialog box of the same serial number . so basically the serial number checkboxes is a parent checkbox and the checkboxes in the dialog box will be their child checkboxes.

Now if the user has checked a parent checkbox, the checkboxes in dialog box will be automatically checked, but if the user unchecks all checkboxes in that dialog box then parent checkbox should also be unchecked automatically.

How do I achieve this?

I have tried so many sample codes since last 4 hours but in vain. I tried doing this

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 are 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 codes 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>