Вывод информации
Добрый день уважаемые форумфане. Хочу на сайте создать нечто в виде предварительной оценки заказа.т.е. пользователь нажимает на кнопочку оценить и открывается всплывающее окно в котором он отмечает чекбоксы и в зависимости от выбранных чекбоков суммируется сумма заказа, далее он жмет оценить и появляется сообщение с примерной стоимостью
т.е. примерно так: отметил: книжки (добавляем +5р) отметил: книжки +сумка (добавляем +3р) и т.д. помогите кто чем может!:) |
alerzo,
угу, все побежали вам помогать :lol: сами приложите какие-нибудь усилия и если произойдет сбой напишите - возможно вам помогут, ну или идите в раздел работа и предлагайте цену за реализацию скрипта с нуля |
alerzo, ну а в чем проблема?
по нажатии на кнопку открывайте окно, модальное окно или показывайте всплывающий блок div с соответствующими checkbox-переключателями и т.д. в value переключателей засовываете соответствующие суммы и подсчитываете по количеству отмеченных после нажатия на кнопку возвращайте сумму атрибутов value checkbox-переключателей, если это окно, или сразу подставляйте число из ранее сложенной переменной в нужное место на странице, либо выводите в виде alert() |
<label><input type="checkbox" data-price="5" /> Книжки</label><br />
<label><input type="checkbox" data-price="3" /> Сумка</label><br />
<label><input type="checkbox" data-price="10" checked /> Ручка</label><br />
<label><input type="checkbox" data-price="13" /> Карандаш</label><br />
<label><input type="checkbox" data-price="27" /> Что-то</label><br />
<div id="total">0 руб.</div>
<script>
var total = 0,
totalDiv = document.getElementById( 'total' ),
els = document.getElementsByTagName( 'input' );
for( var i = 0, el; el = els[ i++ ]; ) {
if ( el.type == "checkbox" && el.getAttribute( 'data-price' ) ) {
total += el.checked ? ( parseFloat( el.getAttribute( 'data-price' ) ) || 0 ) : 0;
el.onclick = function( e ) {
var target = e && e.target || window.srcElement;
total = target.checked ?
total + ( parseFloat( target.getAttribute( 'data-price' ) ) || 0 ) :
total - ( parseFloat( target.getAttribute( 'data-price' ) ) || 0 );
totalDiv.innerHTML = total + " руб.";
}
}
}
totalDiv.innerHTML = total + " руб.";
</script>
|
devote,
а вопрос я когда смотрю прмеры mdn там тоже все время текст связанный с checkbox помещают в label - зачем?:-? |
Цитата:
|
Цитата:
|
lord2kim,
хм, label означает слой, то есть при клике на слой активируется его инпут что-ли? |
Цитата:
<input type="checkbox" id="check1"><label for="check1">Lorem</label> |
Цитата:
<label><input type="text" /> Книжки</label><br/> <label><input type="color" /> Книжки</label><br/> <label><textarea></textarea> Книжки</label><br/> |
Это связывание лейбла и инпута:
Цитата:
Цитата:
<input type="checkbox" id="x1" />
<div style="height: 50px; background: #eee"></div>
<label for="x1">Лейбл для чекбокс</label>
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
|
Цитата:
Цитата:
Цитата:
|
Цитата:
<label><input type="checkbox" onclick="alert('a')">click</label><br>
<label><input type="button" value="click" onclick="alert('b')">click</label><br>
<label><input onclick="alert('c')">click</label>
|
| Часовой пояс GMT +3, время: 07:43. |