如何在 angular.js 中创建多选按钮

Question

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

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 1

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>