JSFiddle - React, Tailwind, and code Playground

by Zhelyakea

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div ng-app="classApp" ng-controller="mainController">
     <div id="serviceDiv"> 
         <div class="ngDiv" ng-repeat="phone in phones">
         <input id="{{phone.id}}" type="checkbox" ng-model="phone.turn" class="input"></input>
    <label for="{{phone.id}}"
    value="{{phone.coast}}"
    ng-class="{active: phone.turn}">{{phone.name}}</label>
         </div>           
         <br><button ng-click="foo()">Отправить</button>
             
         <input value="{{summ()}}"></input>
             <br><button ng-click="hideDiv()"class="">Далее</button>
    </div> 
   <div>
        <button ng-click="showDiv()">Назад</button>
  </div>
</div>

CSS

.ngDiv{
    margin:0;
     display:inline-block;   
}
input[type="checkbox"]{
    display:none;
}
input{
    text-align:center;
    height:25px;
    width:120px;   
}
button{
    display:inline-block;
    margin:5px;
    height:25px;
    width:120px;
}
label{
    text-align: center;
    height:25px;
    width:120px;
    background-color:grey;
     margin:5px;
}
input[type="checkbox"]:checked + label{
  background-color:green;
}
div{
    margin:10px;
}

JavaScript

angular.module('classApp', [])

.controller('mainController', function($scope) {
    $scope.phones = [
      {"name": "Услуга 1","id": "1","clas": "1", "coast": "100", "turn": true},
      {"name": "Услуга 2","id": "2","clas": "0", "coast": "200", "turn": false},
      {"name": "Услуга 3","id": "3","clas": "1", "coast": "300", "turn": true},
        ];
    $scope.summ = function($scope){
        var links = document.getElementsByClassName("active");
        var values = [].map.call(links, function (el) {
            return el.getAttribute("value");
        });  
        summa = function(m) {
            for(var s = 0, k = m.length; k; s += parseInt(m[--k]));
            return s;
        };
        summ=summa(values);
        return summ;
    };
    $scope.foo = function($scope){
        var links = document.querySelectorAll('.input:checked');
        var values = [].map.call(links, function (el) {       
            return el.getAttribute("id");       
        });    
        alert(values)
        };
    $scope.hideDiv = function($scope){
        var links = document.querySelectorAll('.input:checked');
        var values = [].map.call(links, function (el) {
            return el.getAttribute("id");
        });   
        if(values.length>0){
            var el = document.getElementById('serviceDiv');
         el.style.display = "none";
        }
        else{
         alert("Выберите услугу!")   
        }
    }
    $scope.showDiv = function($scope){
     var el = document.getElementById('serviceDiv');
         el.style.display = "block";
    }
});