选择深层嵌套的复选框需要使用jQuery选择父复选框

Question

I'm trying to select a deeply nested checkbox child, and when doing so, my jQuery code will also select the parent checkboxes above it in the DOM. I then want to store the IDs of the parent checkboxes by using the IDs of the deeply nested child checkboxes.

My sample code doesn't work properly as constructed.

Sample: JSFiddle.

Code:

<form action="" method="POST" id="RoleForm">
  <div class="form-group">
    <label>Role Name</label><input id="rolename" required="" class="form-control" name="rolename" placeholder="Add Role Name" type="text">
  </div>
  <div class="form-group">
    <label>Role Description</label>
    <textarea id="roledesc" required="" class="form-control" name="roledesc" placeholder="Add Role Description"></textarea>
  </div>
  <div class="form-group">
    <ul>
      <li style="display: block; width: 100%;float: left;">
        <input name="page" value="page-1" type="checkbox">Cockpit <br>
        <ul>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-1" type="checkbox">Update Deposit Amount <br>
          </li>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-2" type="checkbox">Pay To Captain <br>
          </li>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-3" type="checkbox">My Action <br>
          </li>
        </ul>
      </li>
      <li style="display: block; width: 100%;float: left;">
        <input name="page" value="page-2" type="checkbox">Dashboard <br>
        <ul>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-2" type="checkbox">Update Deposit Amount <br>
          </li>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-1" type="checkbox">Pay To Captain <br>
          </li>
        </ul>
      </li>
      <li style="display: block; width: 100%;float: left;">
        <input name="page" value="page-5" type="checkbox">TestPage <br>
        <ul>
          <li style="display: block;width: 20%;float:left;">
            <input name="action" value="action-2" type="checkbox">Pay To Captain <br>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</form>

jQuery:

var pageArray = [];
var actionArray = [];
$('input[name="page"]:checked').each(function() {
  pageArray.push($(this).val());
  $('input[name="action"]:checked').each(function() {
    actionArray.push($(this).val());
  });
});
alert(actionArray);