29 560 Скрипты / Form

Увеличить и уменьшить значение в поле 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>
Скачать 3179Загрузок 844 b
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи