xxxxxxxxxx1
<div class="treeview" data-mdb-selectable="true">2
<ul id="firstList">3
<li id="One">One</li>4
<li id="Two">Two</li>5
<li>6
<a id="Three">Three</a>7
<ul class="show">8
<li id="1">Second-one</li>9
<li id="2">Second-two</li>10
<li>11
<a id="Second-three">Second-three</a>12
<ul>13
<li>14
<a id="7">Third-one</a>15
<ul>16
<li id="3">Fourth-one</li>17
<li id="4">Fourth-two</li>18
<li id="5">Fourth-three</li>19
</ul>20
</li>21
<li id="6">Third-two</li>22
<li>23
<a id="9">Third-three</a>24
<ul>25
<li id="10">Fourth-one</li>26
<li id="11">Fourth-two</li>27
<li id="12">Fourth-three</li>28
</ul>29
</li>30
</ul>31
</li>32
</ul>33
</li>34
</ul>35
</div>36
37
<button id="getIdsButton" class="btn btn-primary">38
Get ids39
</button>1
1
xxxxxxxxxx1
const getIdsButtonEl = document.querySelector('#getIdsButton');2
const treeviewEl = document.querySelector('.treeview'); 3
const firstUlEl = document.querySelector('#firstList');4
getIdsButtonEl.addEventListener('click', () => {5
const checkboxes = [].concat(...Element.prototype.querySelectorAll.call(firstUlEl, 'input[type="checkbox"]'));6
const checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);7
const checkedCheckboxesParents = checkedCheckboxes.map(checkbox => checkbox.parentElement);8
const checkedCheckboxesParentsIds = checkedCheckboxes.map(checkbox => checkbox.parentElement.getAttribute('id'));9
console.log(checkedCheckboxesParentsIds)10
}); Console errors: 0