How to create a multi select button in angular.js

I want to create a multi select box for food toppings.

enter image description here

I would like to click on the American cheese and have both in a active state but every time I click one the other :hover state is remove.

I’m using angular is that makes any different.


Have a CSS .active class. Then on click of your elements check if it has that class, remove it if it already does and add it otherwise. To do that you can use .toggleClass():

  $(this).toggleClass( 'active' );
.btn { border: 1px solid grey; } { background-color: DimGrey; }
<script src=""></script>
<button class='btn'>Extra Chesse</button>
<button class='btn'>American Chesse</button>
<button class='btn'>Swiss Chesse</button>

Leave a Reply

Your email address will not be published. Required fields are marked *