使用javascript将复选框更改为可设置动画的按钮

我正在开发一个练习应用程序。我有一个使用复选框和单选按钮的工作过滤系统。我需要一种方法来取代他们的按钮，我可以动画。对于我的plunk，我将使用带有文本的按钮，但脱机时，我将用图像替换它们。以下是我的作品样本：

HTML

样品弹

---

PS我知道我的不是最有效的方法，但我还是一个初学者。按钮是我主要关心的问题，但是如果有人对如何改进代码本身有建议，请随意提供一个例子。这只是我的一个例子。我的全套有另外5套按钮和更多的食谱

如果你把标签放在输入之后，你可以用css来设置样式，而不需要js：是的，我可以这样做，但是我的导师希望你能在一个合适的应用程序上找到正常的按钮。这有意义吗？谢谢你，虽然他最终希望我使用图标作为按钮而不是文本，但我仍然对你试图实现的目标感到困惑。您是否建议您需要一组类似于单选按钮的按钮，以及另一组类似于复选框的按钮？“我假设你也想设计它们的样式，这样你就知道哪些是被选中的？”克莱斯说得没错。抱歉，上周有人在忙，无法处理此问题

        <h2>Type</h2>
        <label class="btns">
            <input type="radio" name="vegMeat" value="" ng-model="type.searchVeg" ng-checked="true">All
        </label>
            <label class="btns">
                <input type="radio" name="vegMeat" value="veg" ng-model="type.searchVeg">Vegetarian
            </label>
            <label class="btns">
                <input type="radio" name="vegMeat" value="meat" ng-model="type.searchVeg">Meat
            </label>

    </div>

  .filter('searchType', function() {
return function(foods, search) {
  var filtered = [];
  if (!search) {
    return foods;
  }
  angular.forEach(foods, function(food) {

    if (angular.lowercase(food.type).indexOf(angular.lowercase(search)) != -1) {
      filtered.push(food);
    }
  });
  return filtered;
};