下拉多选复选标记切换

基于此代码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; 
}

来源

2017-05-30 M.Izzat

您可以使用selectpicker为此，它提供了您需要的一切。 https://silviomoreto.github.io/bootstrap-select/examples/#multiple-select-boxes –

谢谢你的建议，我在它没有工作之前尝试过，可能是因为这与我的数据表功能有冲突。但下面的Alex回答已解决了我的问题。 –

使用toggleClass()方法，而不是addClass()并且不要将其从其他人身上移除。添加dropdown('toggle')以防止点击某个项目后菜单崩溃。

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

来源

2017-05-30 11:15:19 Alexander

嗨亚历克斯，这解决了我的问题，非常感谢！ –

下拉多选复选标记切换

回答

相关问题