Показать сообщение отдельно
  #2 (permalink)  
Старый 07.11.2017, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,123

калькулятор для расчета стоимости
Anushki,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>


</head>

<body>
<form>

<p><input name="itemtype1" id="a" type="radio" value="10"> Значение (A=10)</p>
<p><input name="itemtype1" id="b" type="radio" value="20"> Значение (B=20)</p>
<p><input name="itemtype1" id="c" type="radio" value="30"> Значение (C=30)</p>

<p><input type="checkbox" name="itemtype2" id="d" value="10"> <label>Значение (D=10)</label></p>
<p><input type="checkbox" name="itemtype2" id="e" value="20"> <label>Значение (E=20)</label></p>

<select name="itemtype3" id="f">
<option value="100">Значение (F=100)</option>
<option value="200">Значение (F=200)</option>
<option value="300">Значение (F=300)</option>
</select>

<p><input type="text" name="itemtype4" id="g" value="0"> Значение (G=по умолчанию 0, число будет введенно в ручную)</p>

<p>Итого: <output name="o" for="a b c d e f g">0</output></p>
</form>

<script>
  window.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form'),
    elem = form.querySelectorAll('[name^="itemtype"]'),
    output = form.querySelector('output');
    function total()
    {
      output.innerHTML = [].reduce.call( elem, function(sum, el) {
          var n =   (+el.value||0) * (el.checked || el.tagName == "SELECT" || el.type == "text");
          return sum + n
       },0);
    }
    form.addEventListener('change', total);
    form.addEventListener('input', total);
      });
</script>
</body>
</html>
Ответить с цитированием