AngularJS : display image instead of checkbox

Question

i want to display my checkboxes as follows : Displayed checkboxes

The "+" should be displayed if the checkbox is not checked while the "-" should be displayed when it is checked.

I have the following code for now :

<input type="checkbox"
       ng-checked="isDrinkInService(drink.Id)"
       ng-click="addOrDeleteDrink(drink)" />

I have no idea how to change it, for now i have this : Displayed checkboxes

Can anyone help me?

This has nothing to do with angular and is simply a css issue — charlietfl, May 09 '17 at 10:44
Well. You can simply use icons instead of checkbox and still have the values saved on local variables. — Sagar, May 09 '17 at 10:47

score 0 · Answer 1 · answered May 09 '17 at 10:49

try this

https://plnkr.co/edit/vYNhJI7yvlxKSBYWE13y?p=preview

  <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-checkbox-input-directive-production</title>


  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<style>
  .question input[type='checkbox'] + label:after {
    content:"-";
}
.question input[type='checkbox']:checked + label:after {
    content:"+";
}
.question input[type='checkbox'] {
    display:none;
}
label {
    cursor:pointer;
}
</style>

</head>
<body ng-app="checkboxExample">
  <script>
  angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.checkboxModel = {
       value1 : true,
       value2 : 'YES'
     };
    }]);
</script>
<form name="myform" ng-controller="ExampleController">
  <ul>
    <li class="question">
        <input type="checkbox" name="question" id="question1" />
        <label for="question1">Questions</label>
    </li>
    <li class="question">
        <input type="checkbox" name="question" id="question2" />
        <label for="question2">Questions</label>
    </li>
</ul>
 </form>
</body>
</html>

score 0 · Answer 2 · answered May 09 '17 at 11:09

It is possible. Entirely working example:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .hidden {
            display: none;
        }

        #mycheckbox + #mycheckboxlabel {
            background-image: url("https://image.freepik.com/free-icon/minus-sign_318-59392.jpg");
            width: 16px;
            height: 16px;
            display: inline-block;
            background-size: cover;
        }
        #mycheckbox:checked + #mycheckboxlabel {
            background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/heavy-plus-sign.png");
        }
    </style>
</head>
<body>
<input id="mycheckbox" type="checkbox" class="hidden">
<label for="mycheckbox" id="mycheckboxlabel"></label>
</body>

</html>

Since you have more of these, you could use a class for the checkbox and label instead of ids in my example.

AngularJS : display image instead of checkbox

2 Answers2