选择一个深度嵌套的复选框需要使用jQuery选择父复选框

Question

我正在尝试选择一个深度嵌套的复选框子级，这样做时，我的jQuery代码还将在DOM中选择其上方的父级复选框。然后，我想通过使用深度嵌套的子复选框的ID来存储父复选框的ID。

我的示例代码无法正常运行。

示例：JSFiddle。

代码：

<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);