Кнопки + и - для input. Увеличение и уменьшение числа на единицу при клике

1363

В этой статье рассмотрим, как сделать у <input type="text"> кнопки, которые при клике будут увеличивать и уменьшать введенное значение на единицу. Такие кнопки часто используются в интернет-магазинах для увеличения и уменьшения счетчика купленных товаров.

Разметка инпута и кнопок:

<input type="text" class='number' value='0'>
<button class='plus'>+</button>
<button class='minus'>-</button>

Чтобы кнопки начали функционировать, понадобится jquery скрипт:

jQuery(document).ready(function () {
let pr = $(".number");
$(".plus").click(function() {
let count = parseInt(pr.val()) + 1;
pr.val(count);
});
$(".minus").click(function() {
let count = parseInt(pr.val()) - 1;
count = count < 1 ? 0 : count; // исключаем отрицательные числа
pr.val(count);
});
});

Демо



Добавить комментарий

Ваш адрес email не будет опубликован.

*
code