Увеличить и уменьшить значение в поле input
Увеличивание и уменьшение значения в поле input с помощью кнопок плюс и минус. Может пригодиться в интернет-магазинах для указания количества единиц покупаемого товара. Требует наличия библиотеки jQuery.
Есть более лучшая альтернатива, данного способа: плагин Stepper.js
HTML
Простейшая разметка:
<div class="number">
<span class="minus">-</span>
<input type="text" value="1" size="5"/>
<span class="plus">+</span>
</div>
Кнопки плюса и минуса можно оформить картинками.
JS
В шапке подключаем jQuery библиотеку и добавляем такой код:
<script type="text/jаvascript" >
$(document).ready(function() {
$('.minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
</script>
Ссылки