17 ноября 2022, 23:14
470
Переключатель плюс и минус для input JS jQuery
Прибавить или отнять 1 по клику для input.
Кнопки плюс и минус для полей input. Можно сделать несколько полей input на одной странице и они будут прибавлять и убавлять для каждого своего поля.
data-max-count="10"
- так можно задать максимальное кол-во.
<div class="btn_container">
<button class="btn_minus">-</button>
<input type="text" class="count" value="1" data-max-count="10">
<button class="btn_plus">+</button>
</div>
<div class="btn_container">
<button class="btn_minus">-</button>
<input type="text" class="count" value="1" data-max-count="10">
<button class="btn_plus">+</button>
</div>
// Убавляем кол-во по клику
$('.btn_minus').click(function() {
let $input = $(this).parent().find('.count');
let count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
});
// Прибавляем кол-во по клику
$('.btn_plus').click(function() {
let $input = $(this).parent().find('.count');
let count = parseInt($input.val()) + 1;
count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
$input.val(parseInt(count));
});
// Убираем все лишнее и невозможное при изменении поля
$('.count').bind("change keyup input click", function() {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9]/g, '');
}
if (this.value == "") {
this.value = 1;
}
if (this.value > parseInt($(this).data('max-count'))) {
this.value = parseInt($(this).data('max-count'));
}
});
.btn_container {
display: flex;
justify-content: center;
}
.count {
max-width: 100px;
text-align: center;
border-radius: 0;
}
.btn_minus {
border-radius: 4px 0 0 4px;
margin-right: -1px;
}
.btn_plus {
border-radius: 0 4px 4px 0;
margin-left: -1px;
}



Комментарии ()