Обнуление элемента до события
Добрый день, прошу уточнить.
Требуется подключать и отключать поля выбора и значения селекта по чекбоксу для калькулятора. Изначально значение 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;
};
|
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>
|
Благодарности
Огромное спасибо! Ушел учить Java Script :)
|
| Часовой пояс GMT +3, время: 04:56. |