如何实现树形结构中，点击选中父元素checkbox后，子元素的checkbox也同时选中

Question

            <ul class="list-unstyled appoint-list">
            <li class="checkbox">
                <label class="wx-radio"><input type="checkbox" value="option1"> 父元素</label>
                <span class="list-switch collapsed pull-right" data-toggle="collapse" data-target="#sublist1"><i class="fa fa-chevron-up"></i></span>
                <ul class="list-unstyled appoint-sublist collapse" id="sublist1">
                    <li class="checkbox">
                        <label class="wx-radio"><input type="checkbox" value="option1-1">子元素1</label>
                    </li>
                    <li class="checkbox">
                        <label class="wx-radio"><input type="checkbox" value="option1-1">子元素2</label>
                    </li>
                    <li class="checkbox">
                        <label class="wx-radio"><input type="checkbox" value="option1-1">子元素3</label>
                    </li>
                    <li class="checkbox">
                        <label class="wx-radio"><input type="checkbox" value="option1-1">子元素4</label>
                    </li>
                </ul>                   
            </li>           
        </ul>

目前想实验的功能就是 点击选中父元素checkbox后，子元素的checkbox也同时选中，父元素取消子元素也同时取消选中，单独选中一个子元素时，父元素也是选中的并且当取消所有子元素的选中后父元素也取消选中状态；

Answer 1

这应该是你想要的吧？
http://css-tricks.com/indeterminate-checkboxes/

Demo:
http://css-tricks.com/examples/IndeterminateCheckboxes/