javascript - 通过复选框从树形 View 中获取已选中的元素

我有这个：

<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

最佳答案

的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; }

关于javascript - 通过复选框从树形 View 中获取已选中的元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39321192/