Treeview s zaškrtávacími políčkami jednoduchý html s Css - html, css, treeview

Hľadám formát stromového zobrazenia pre môj zálohovací systém ipfire. kde musia používatelia vybrať priečinky na aktualizáciu. ako na obrázku ->

exemple

serverový skript je CGI Perl, ale môžem implementovať jednoduché HTML a CSS alebo veľmi jednoduché JS. Potrebné sú nadradené priečinky, ak sú začiarknuté, aby sa automaticky skontroloval obsah

odpovede:

Nepoznám váš HTML, ale ak to vyhovuje

<div class="tree">
<input type="checkbox" /> 1.
<div>
<input type="checkbox" /> 1.1.
<div>
<input type="checkbox" /> 1.1.1.
</div>
</div>
</div>

a ak používate knižnicu jQuery, môžete to urobiť tak

$(document).ready(function() {
$(".tree input[type="checkbox"]").on("change", function() {
checkParent($(this));
});

function checkParent(element) {
if (element.prop("checked")) {
var parent = element.parent().parent().find("> input[type="checkbox"]");

if (parent.length) {
parent.prop("checked", true);
checkParent(parent);
}
}
}
});