user3862830 user3862830 - 2 months ago 16
HTML Question

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.

Answer

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():

$('.btn').click(function(){
  $(this).toggleClass( 'active' );
});
.btn { border: 1px solid grey; }
.btn.active { background-color: DimGrey; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='btn'>Extra Chesse</button>
<button class='btn'>American Chesse</button>
<button class='btn'>Swiss Chesse</button>

Comments