Topic: Treeview ID support
I was wondering how to get the ID values from the LI in the Tree view selectable lists when a checkbox is selected. Every function call seems to just return the ID of the div that it is in, which is "treeview" just like in the example on the page. For example, say I selected two boxes and pressed a submit button, I am unable to get the LI id values for each of the selected items. I also looked into assign an ID to the checkboxes themselves, but found out that the ID would just be the same for every checkbox in the list. Any input would be much appreciated, as I am using JavaScript for all of the interactions.
Hello, you could programatically look for selected checkboxes and get its parents. See snippet below as I prepared a working example for you:
https://mdbootstrap.com/snippets/standard/m-duszak/3633839#js-tab-view
const getIdsButtonEl = document.querySelector('#getIdsButton');
const treeviewEl = document.querySelector('.treeview');
const firstUlEl = document.querySelector('#firstList');
getIdsButtonEl.addEventListener('click', () => {
const checkboxes = [].concat(...Element.prototype.querySelectorAll.call(firstUlEl, 'input[type="checkbox"]'));
const checkedCheckboxes = checkboxes.filter(checkbox => checkbox.checked);
const checkedCheckboxesParents = checkedCheckboxes.map(checkbox => checkbox.parentElement);
const checkedCheckboxesParentsIds = checkedCheckboxes.map(checkbox => checkbox.parentElement.getAttribute('id'));
console.log(checkedCheckboxesParentsIds)
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No