Форум

Sviside · #1 (**permalink**) 17.04.2018, 11:47

Добрый день, прошу уточнить.
Требуется подключать и отключать поля выбора и значения селекта по чекбоксу для калькулятора.
Изначально значение select должно не учитываться.
Спасибо форуму, понял примерную логику работы, но работает с ошибкой.

Сам код:
https://codepen.io/tgbot454/pen/GxbaWZ

И извиняюсь перед Вами за странную тему, довольно плохо высказываю свои мысли.

<p> <label><input type="checkbox" name="itemtype2" id="u" value="0">Чекбокс</label></p>

<select name="itemtype3" id="z">
<option value="2000">1</option>
<option value="4000">2</option>
<option value="6000">3</option>
<option value="8000">4</option>
</select>

document.getElementById('u').onchange = function(){
    document.getElementById('z').disabled = !this.checked;
    document.getElementById('z').selectedIndex = 0;
};

рони · #2 (**permalink**) 17.04.2018, 12:08

Sviside,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css'>
  <style type="text/css"> .as01 {
 width: 60%;
    background-color: #fff;
}
  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
    var form = document.querySelector('form'),
    output = form.querySelector('output');
    function total()
    {
      var elem = form.querySelectorAll('input:checked');
      document.getElementById('u').value = document.getElementById('z').value;
      document.getElementById('t').value = document.getElementById('w').value;
      output.innerHTML = [].reduce.call( elem, function(sum, el) {
          var n =   (+el.value||0)
          return sum + n
       },0);
    }
   form.addEventListener('change', total);
      });
  </script>
</head>

<body>
<div class="container">
  <div class="row">
    <h3> НАШИ УСЛУГИ И ЦЕНЫ </h3>
  </div>
  <div class="row">
    <p>Воспользуйтесь "свадебным калькулятором", чтобы рассчитать стоимость пакета услуг для Вашей свадьбы!</p>
  </div>
</div>

<div class="container as01">
<form>
<div class="row justify-content-start align-items-center">
  <div class="col-2">
   <img src="https://static.tildacdn.com/tild3963-3830-4262-a564-623532323033/_.png" title="nevesta" alt="nevesta" class="img-fluid">
  <p>Невеста</p>
  </div>
    <div class="col-2 col-md-3">
  <p><label><input type="checkbox" name="itemtype2" id="d" value="3000"> Свадебная прическа</label></p>
  </div>
    <div class="col-2 col-md-3">
  <p><label><input type="checkbox" name="itemtype2" id="d" value="1500"> Репетиция прически</label></p>
  </div>
    <div class="col-2 col-md-2">
  <p><label><input type="checkbox" name="itemtype2" id="d" value="2500"> Визаж</label></p>
  </div>
    <div class="col-2 col-md-2">
  <p><label><input type="checkbox" name="itemtype2" id="d" value="1200"> Репетиция визажа</label></p>
  </div>
</div>

<div class="row justify-content-start align-items-center">
  <div class="col-2 ">
       <img src="https://static.tildacdn.com/tild3366-3135-4365-a132-363738343830/_.png" title="zenih" alt="zenih" class="img-fluid">
  <p>Жених</p>
  </div>
    <div class="col-2">
  <p><label><input type="checkbox" name="itemtype2" id="d" value="1000"> Стрижка</label></p>
  </div>
    <div class="col-2">
  <p> <label><input type="checkbox" name="itemtype2" id="d" value="500">Укладка</label></p>
  </div>
    <div class="col-2">
  <p> <label><input type="checkbox" name="itemtype2" id="d" value="1000">Фотовизаж</label></p>
  </div>
</div>


<div class="row justify-content-start align-items-center">
  <div class="col-2">
<img src="https://static.tildacdn.com/tild6438-3735-4434-a132-663936313335/_.png" title="gosti" alt="gosti" class="img-fluid">
  <p>Гости</p>
  </div>
    <div class="col-2">
  <p> <label><input type="checkbox" name="itemtype2" id="t" value="0">Укладка</label></p>
  </div>
    <div class="col-2">
  <select name="itemtype3" id="w" >
<option value="2000">1</option>
<option value="4000">2</option>
<option value="6000">3</option>
<option value="8000">4</option>
</select>
  </div>
    <div class="col-2">
  <p> <label><input type="checkbox" name="itemtype2" id="u" value="0">Визаж</label></p>
  </div>
      <div class="col-2">
<select name="itemtype3" id="z">
<option value="2000">1</option>
<option value="4000">2</option>
<option value="6000">3</option>
<option value="8000">4</option>
</select>
  </div>
</div>

<div class="row justify-content-start align-items-center">
  <div class="col-2">
<img src="https://static.tildacdn.com/tild3234-3437-4437-a234-383636616432/_.png" title="viezd" alt="viezd" class="img-fluid">
  <p>Выезд</p>
  </div>
<div class="col-5">
<p>Обслуживание в день свадьбы:</p>
<p><input name="itemtype1" id="a" type="radio" value="500"> В пределах КАД</p>
<p><input name="itemtype1" id="b" type="radio" value="800"> За пределами КАД</p>
<p><input name="itemtype1" id="c" type="radio" value="0"> В нашей студии</p>
  </div>

<div class="col-5">
<p>Репетиция свадебного образа:</p>
<p><input name="itemtype2" id="m" type="radio" value="500"> В пределах КАД</p>
<p><input name="itemtype2" id="l" type="radio" value="800"> За пределами КАД</p>
<p><input name="itemtype2" id="n" type="radio" value="0"> В нашей студии</p>
  </div>




</div>

<div class="row justify-content-around">
  <div class="col-5">
  <p>Итого:</p>
  <p><output name="o" for="a b c d e f g m l n z u w t">0</output></p>
  </div>
</div>




</form>
</div>
<script>



</script>


</body>
</html>

Sviside · #3 (**permalink**) 17.04.2018, 12:28

Огромное спасибо! Ушел учить Java Script

Форум

Справочник

Discord чат

Курсы javascript