Показать сообщение отдельно
  #15 (permalink)  
Старый 11.03.2017, 22:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Sprutenok000,
<!DOCTYPE html>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>JavaScript калькулятор расчета стоимости для сайта</title>
  <meta name="description" content="В эпоху широчайшего развития бизнеса при помощи сети Интернет актуальным является создание JavaScript калькулятора для расчета стоимости товаров или услуг компании. В этой статье я распишу создание простейшего калькулятора для сайта по продаже линолеума." />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" type="text/css" href="css/Calculator.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>
     jQuery(document).ready(function() {
         jQuery("#mobSel").on('change', function() {
             var newSelect = jQuery(this).val();
             if (newSelect == "dors1") {
                 jQuery('div #blok1').append('<div id="Door_standard" style="border: 1px solid #666; margin: 0 50px 0 50px;"><input type="checkbox" name="stan1" value="Дверь стандартная открывается наружу петли с лева">Дверь стандартная открывается наружу петли с лева<br /><input type="checkbox" name="stan2" value="Дверь стандартная открывается наружу петли с права">Дверь стандартная открывается наружу петли с права<br /><div style="float: right; margin: -40px 0 0 0;"><input type="checkbox" name="stan3" value="Дверь стандартная открывается во внутрь помещения петли с лева">Дверь стандартная открывается во внутрь помещения петли с лева<br /><input type="checkbox" name="stan4" value="stan4">Дверь стандартная открывается во внутрь помещения петли с права</div></div>')
             };
             jQuery("#Door_standard").on('change', function() {
                 var checkbox = jQuery("input:checked", this);
                 var x = $.map(checkbox, function(input) {
                     return input.value
                 });
                 jQuery('#price').html(x.join("<br>"));
             });
         });
     });
 </script>
</head>
<body>
  <div id="wraper">
    <h1 id="calculator">Калькулятор</h1>
      <form>
        <select id="mobSel"><!--По этому id будет срабатывать виджет-->
          <option value="dors">Выберите из списка</option>
          <option value="dors1">Металлические двери ( одностворчатые 2100х900)</option>
          <option value="dors2">Металлические двери ( двустворчатые 2000х1200)</option>
          <option value="dors3">Противопожарные двери</option>
          <option value="dors4">Технические двери</option>
          <option value="dors5">Ставни</option>
          <option value="dors6">Ворота прямые</option>
          <option value="dors7">Ворота арочные</option>
          <option value="dors8">Антивандальные решетки на кондиционер</option>
          <option value="dors9">Пластиковые окна ПВХ</option>
        </select>
      </form>
      <br/ ><br/ >
    <div id="blok1"></div>
    <div id="blok2"></div>
    <div id="other"></div>
    <br/ ><br/ >
    <div id="price"></div>
  </div>

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