При выборе глубоко вложенного флажка необходимо выбрать родительские флажки с помощью jQuery

Я пытаюсь выбрать дочерний элемент с глубоко вложенным флажком, и при этом мой код jQuery также выберет родительские флажки над ним в DOM. Затем я хочу сохранить идентификаторы родительских флажков, используя идентификаторы глубоко вложенных дочерних флажков.

Мой пример кода не работает должным образом.

Пример: 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);