Получить выбранные элементы из списка в виде дерева с флажками

Question

У меня есть это:

<ul id="master"> 
<li><input type="checkbox" id="users"><label for="users">Users</label> 
    <ul> 
    <li><input type="checkbox" id="so"><label for="so">so seleciona</label> </li> 
     <li><input type="checkbox" id="Bra"><label for="Bra">Brad</label> 
     </li> 
     <li><input type="checkbox" id="Share"><label for="Share">Shared</label> 
     </li> 
    </ul> 
</li> 
<li><input type="checkbox" id="aa"><label for="aa">outra opção</label></li> 
</ul>  

Как я могу получить значение?

Я сделал demo

Answer 1

CSS

ul { margin: 0 0 -1em -12px; padding:1em 0 0 0; position:relative; border-color:#A2D3FF; } 
    li { 
     padding:7px 0 7px 32px; 
     margin-left:0; 
     list-style:none; 
     font-size:13px; 
     position:relative; 
    border-left: 1px solid; 
    border-right: 1px solid; 
    } 
    li:first-child { 
     border: 1px solid; 
     border-bottom: none; 

}

li::before { content:' '; 
     display:block; width:23px; height:1.5em; 
     position:absolute; left:-3px; top:-1em; 
    } 
    li:first-child:before { height:2em; top:-1.5em; } 
    /* FireFox ignores absolute positioning on the generated content */ 
    body:not([class*=""]) li:before { margin-top:-1em; margin-bottom:-.6em ;margin-left:-35px; } 
    body:not([class*=""]) li:first-child:before { margin-top:-1.55em; } 

    li:last-child { //margin-left:3px; 
     border: 1px solid; 
border-top: none;/* moves the text over by the same amount as the line would have */ } 

    li input { left: 11px; z-index:1; margin-top:-1px; position:absolute; } 
    li label { font-weight:bold; } 
    li label::after { 
     content: ''; 
     font-weight: normal; 
     font-style: italic; 
     font-size:80%; 
     color:green; 
    } 
    li input:checked + label:after { 
     content: ' '; 
     color:red; 
    } 

    /* special for the root of the list: */ 
    ul#master {margin-left:0; } 
    ul#master > li:first-child:before { display:none; } 
    ul#master > li:first-child { border-left-width: 0; border:none} 
ul#master > li {border: none; margin-top: 7px;} 

    /* here's the part that does the expanding and collapsing: */ 
    input + label + ul { display:none; } 
    input:checked + label + ul { display:block; } 

    h1 { font-size:18px; } 
    h3 { font-size:15px; } 
    p, code { font-size:12px; }