CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
M.Izzat
M.Izzat

Reputation: 1166

Dropdown Multiselect Check Mark Toggle

Based from this code http://jsfiddle.net/bs5rc6k3/3/ I created a dropdown list where when you select an option it will add an check mark beside the option. but this is only for single select. How can I change it to a toggle function where I can add check mark to each of the option I selected instead, in other word multiple select check mark?

Here is my code:

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

Upvotes: 0

Views: 1609

Answers (1)

Alexander
Alexander

Reputation: 4537

Use toggleClass() method instead of addClass() and do not remove this from others. Add dropdown('toggle') to prevent the menu collapsing after click on an item.

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

Upvotes: 1

Related Questions