Увеличивание и уменьшение значения в поле input с помощью кнопок плюс и минус. Может пригодиться в интернет-магазинах для указания количесва единиц покупаемого товара. Требует наличия библиотеки jQuery.

Разметка HTML

Простейшая разметка:

<div class="number">
    <span class="minus">-</span>
    <input type="text" value="1" size="5"/>
    <span class="plus">+</span>
</div>

Кнопки плюса и минуса можно оформить картинками.

javascript

В шапке подключаем jQuery библиотеку и добавляем такой код:

    <script type="text/javascript" >
        $(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>

СКАЧАТЬСкачек: 1763
844 b
Кто скачал?

ДЕМОПосмотреть
пример