Показать сообщение отдельно
  #8 (permalink)  
Старый 07.10.2014, 07:05
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

http://learn.javascript.ru/play/xYLh9b

<!DOCTYPE HTML>
<html>
  
  <head>
    <style type="text/css">
      #result label {
        clear: both;
        display: block;
        margin: 10px 0;
        width: 200px;
      }
      #result input {
        float: right;
      }
    </style>
  </head>
  
  <body>
    <div id="result">
      <label>120 руб
        <input data-price="120" type="checkbox">
      </label>
      <label>123 руб
        <input data-price="123" type="checkbox">
      </label>
      <label>23 руб
        <input data-price="23" type="checkbox">
      </label>
      <div>Итого: <span id="result-sum">0</span></div>
    </div>
    
    <script type="text/javascript">
      (function() {
        var i, total = 0,
            resultElem = document.getElementById('result'),
            resultLabels = resultElem.querySelectorAll('input[type="checkbox"]'),
            resultSum = document.getElementById('result-sum');
        function getSum() {
          var price = +this.getAttribute('data-price');
          total += this.checked ? price : -price;
          resultSum.innerHTML = total;
        }
        for(i=0; i<resultLabels.length; i++) resultLabels[i].onchange = getSum;
      })();
    </script>
  </body>

</html>
Ответить с цитированием