javascript - 下拉多选复选标记切换

Question

基于此代码 http://jsfiddle.net/bs5rc6k3/3/我创建了一个下拉列表，当您选择一个选项时，它会在该选项旁边添加一个复选标记。但这仅适用于单选。如何将其更改为切换功能，我可以在其中为我选择的每个选项添加复选标记，换句话说，多选复选标记？

这是我的代码:

HTML

<div class="col-lg-12">
   <div class="button-group">
       <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span>Column Filter</span> <span class="caret"></span></button>
           <ul id="myDropdown" class="dropdown-menu">
           <li><a href="#" class="toggle-vis" data-column="0"><i class="fa fa-check"></i> A</a></li>
           <li><a href="#" class="toggle-vis" data-column="1"><i class="fa fa-check"></i> B</a></li>
           <li><a href="#" class="toggle-vis" data-column="2"><i class="fa fa-check"></i> C</a></li>
           <li><a href="#" class="toggle-vis" data-column="3"><i class="fa fa-check"></i> D</a></li>

                            </ul>
                        </div>
                    </div>

Javascript

<script>
    $('#myDropdown > li > a').click(function(e){
        $('#myDropdown > li > a').removeClass('selected');
        $(this).addClass('selected');
    });
</script>

CSS

#myDropdown > li > a > .fa{
    visibility:hidden;
}
#myDropdown > li > a.selected > .fa{
    visibility:visible;
}

Answer 1

使用toggleClass()方法而不是 addClass() 并且不要从其他方法中删除它。添加 dropdown('toggle') 以防止菜单在单击某个元素后折叠。

$('#myDropdown > li > a').click(function(e){
    $(this).toggleClass('selected');
    $('.dropdown-menu').dropdown('toggle');
});